@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/



#main .whiteBox .headerLogo.ab {
	position: absolute;
	right: 10px;
	left: auto;
}
.jsScrollBox .jsFlex {
	display: flex;
}
#main .sec01 {
	width: 150vw;
	position: relative;
}
.box1 {
	height: 100%;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
}
#main .sec01 .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	filter: blur(8px);
	transition: transform 1.8s ease-out,opacity 1.8s ease-out,visibility 1.8s ease-out,filter 1.8s ease-out;
}
#main .sec01 .bg.show {
	filter: blur(0px);
	opacity: 1;
	visibility: visible;
}
#main .sec01 .bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .sec01 .bgCover {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 13.1rem solid #fff;
	border-left-width: 15.2rem;
	border-right-width: 15.6rem;
}
#main .comLogoInfo svg {
	height: auto;
	width: 11.4rem;
}
#main .comLogoInfo svg path {
    fill: none;
	stroke: #fff;
	stroke-width: 16;
}
#main .comLogoInfo svg path.cls-2 {
	stroke-width: 20;
}
#main .sec01 .comLogoInfo p {
	opacity: 0;
	visibility: hidden;
	transition: all 1s ease-in;
}
#main .sec01 .comLogoInfo.show p {
	opacity: 1;
	visibility: visible;
}
#main .sec02 {
	padding: 0 23rem 0 25rem;
	width: 431.4rem;
	height: 100%;
	position: relative;
	box-sizing: border-box;
}
#main .sec02 .btmText {
	position: absolute;
	bottom: 2.4rem;
	right: 3.3rem;
	font-weight: 300;
	font-size: min(15px,0.9rem);
}
#main .sec02 .btmText span {
	letter-spacing: -0.2em;
	margin-right: 0.2em;
}
@media all and (min-width: 1000px) {
	#main .sec02 .btmText a:hover {
		opacity: 0.5;
	}
	.pad #main .sec02 .btmText a:hover {
		opacity: 1;
	}
	.comLogoInfo {
	position: absolute;
	left: calc(10.7% - 5.1rem);
	bottom: 55% !important;
	z-index: 1;
}
}
#main .sec02 .imgBox01 {
	margin: auto 0 7.87vh;
	width: 72rem;
}
#main .sec02 .imgBox01 .textBox {
	width: fit-content;
	margin-top: -0.2rem;
}
#main .sec02 .imgBox01 .photoBox {
	position: relative;
	width: 38rem;
}
#main .sec02 .imgBox01 .img {
	width: 8.5rem;
	position: absolute;
	left: -3.2rem;
	top: -17.87vh;
	z-index: 1;
}
#main .sec02 .imgBox01 .photo {
	height: 62.5vh;
	width: 38rem;
}
#main .sec02 .imgBox01 .photo .parallax {
	width: 48rem;
}
#main .sec02 p.en {
	margin-bottom: 9.37vh;
	font-size: min(15px,0.9rem);
	font-weight: 300;
}
#main .sec02 .topPho {
	margin: 0 5.9rem 0 -2rem;
	width: 30rem;
	height: 50vh;
}
#main .sec02 .topPho .parallax {
	width: 40rem;
}
#main .sec02 .btmPho {
	margin: auto 0 3.75vh;
	width: 14rem;
	height: 22.5vh;
}
#main .sec02 .btmPho .parallax {
	width: 24rem;
}
#main .sec02 .imgBox01 .comLink {
	text-align: right;
}
#main .sec02 .imgBox02 {
	width: 117.6rem;
	align-items: flex-end;
	justify-content: flex-end;
}
#main .sec02 .imgBox02 .textBox {
	width: fit-content;
	padding: 0 7rem 12vh 0;
}
#main .sec02 .imgBox02 .headLine01 {
	margin-bottom: 6rem;
}
#main .sec02 .imgBox02 .comLink {
	text-align: right;
	/*margin-right: 2.7rem;*/
}
#main .sec02 .imgBox02 .photoBox {
	position: relative;
	width: 64rem;
}
#main .sec02 .imgBox02 .img {
	width: 275px;
	position: absolute;
	left: -18rem;
	top: 11.37vh;
	z-index: 1;
}
@media all and (max-height: 800px)and (min-width: 999px) {
	#main .sec02 .imgBox02 .img {
		width: 35vh;
		left: -24vh;
		max-width: 275px;
	}
	
}
#main .sec02 .imgBox02 .photo {
	height: 100vh;
	width: 64rem;
}
#main .sec02 .imgBox02 .photo .parallax {
	width: 84rem;
}
#main .sec02 .imgBox02 .photo .parallax .pho {
	height: 100vh;
}
#main .sec02 .imgBox02 .photoBox .slick-dots {
	position: absolute;
	right: -3rem;
	bottom: 1rem;
	width: 8px;
}
#main .sec02 .imgBox02 .photoBox .slick-dots button {
	display: none;
}
#main .sec02 .imgBox02 .photoBox .slick-dots li {
	margin-bottom: 1.5rem;
	width: 8px;
	height: 8px;
	border: 1px solid #333;
	border-radius: 50%;
	overflow: hidden;
	transition: all 0.3s;
	box-sizing: border-box;
	cursor: pointer;
}
#main .sec02 .imgBox02 .photoBox .slick-dots li.slick-active {
	background-color: #333;
}
#main .sec02 .imgBox03 {
	margin: auto 0 auto 24.9rem;
	width: 119.1rem;
	height: 100vh;
	padding: 21.9rem 5.2rem 0 0;
	position: relative;
	box-sizing: border-box;
}
#main .sec02 .imgBox03 .textBox {
	width: fit-content;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
#main .sec02 .imgBox03 .headLine01 {
	margin-bottom: 8.9rem;
}
#main .sec02 .imgBox03 .headLine02 {
	margin-bottom: 1.2rem;
	letter-spacing: 0.27em;
}
#main .sec02 .imgBox03 p.en {
	margin-bottom: 5.8rem;
}
#main .sec02 .imgBox03 .comLink {
	margin-right: -1.2rem;
	text-align: right;
}
#main .sec02 .imgBox03 .photo01 {
	position: absolute;
	left: 0;
	top: 13.8rem;
	width: 29.8rem;
}
#main .sec02 .imgBox03 .photo02 {
	position: absolute;
	left: 50%;
	margin-left: -51rem;
	bottom: 0;
	width: 27rem;
}
#main .sec02 .imgBox03 .photo03 {
	position: absolute;
	right: 50%;
	margin-right: -37.8rem;
	top: 0;
	width: 29.5rem;
}
#main .sec02 .imgBox03 .photo04 {
	position: absolute;
	right: 0;
	bottom: 11.4rem;
	width: 33.1rem;
}
#main .sec02 .imgBox03 .photo05 {
	position: absolute;
	right: 30rem;
	bottom: -34rem;
	width: 27rem;
}
#main .sec02 .imgBox03 .photo06 {
	position: absolute;
	left: 33%;
	margin-left: -50rem;
	bottom: -60rem;
	width: 26rem;
}
#main .secLast {
	width: 100vw;
	flex-shrink: 0;
}
#main .sec03 {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
}
#main .logoInfoLast {
	position: fixed;
	opacity: 0;
	visibility: hidden;
	transform: translateY(3rem);
	transition: all 1s;
}
#main .logoInfoLast.on {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}
#main .sec03 .videoBox {
	width: 100%;
	height: 100%;
}
#main .sec03 .videoBox img,
#main .sec03 .videoBox video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .stickyBox {
	height: 100%;
}
@media all and (max-width: 999px) {
	.jsScrollBox {
		overflow: visible;
	}
	.comLogoInfo {
	bottom: 35% !important;
}
	#main .sec01 .bgCover {
		border-right-width: 5.1rem;
		border-top-width: 16.1vh;
		border-bottom-width: 17.5vh;
		border-left-width: 5.1rem;
	}
	body.pad #main .sec01 .bgCover {
		border-right-width: 5.5rem;
		border-top-width: 9.1vh;
		border-bottom-width: 9.5vh;
		border-left-width: 5.5rem;
	}
	#main .comLogoInfo .logo svg {
		width: 100%;
	}
	
	
	#main .sec02 {
		padding: 0 6rem 0 17rem;
		width: 288rem;
	}
	#main .sec02 .btmText {
		bottom: 1.8rem;
		right: 2rem;
	}
	#main .sec02 .imgBox01 {
		margin: 0;
		height: 100%;
		width: 72.1rem;
	}
	#main .sec02 .imgBox01 .textBox {
		margin-top: 0;
		padding: 28.9vh 0 0;
		display: block;
		z-index: 1;
	}
	#main .sec02 .imgBox01 .photoBox {
		margin: 29.18vh 0 0;
	}
	#main .sec02 .imgBox01 .img {
		top: -24.6%;
	}
	#main .sec02 .imgBox01 .photo {
		width: 32rem;
		height: 60vh;
	}
	#main .sec02 .imgBox01 .photo .parallax {
		width: 45rem;
	}
	#main .sec02 p.en {
		margin-bottom: 6.79vh;
	}
	#main .sec02 .topPho {
		margin: 0 -1.1rem 0 -9.2rem;
		width: 22rem;
		height: 40vh;
	}
	#main .sec02 .topPho .parallax {
		width: 30rem
	}
	#main .sec02 .btmPho {
		margin: 0 10rem 0 0;
		height: 100%;
	}
	#main .sec02 .btmPho .parallax {
		width: 35rem;
		top: auto;
		bottom: 0;
		height: 22.2vh;
	}
	#main .sec02 .imgBox02 {
		width: 70.2rem;
		align-items: flex-start;
		justify-content: space-between;
	}
	#main .sec02 .imgBox02 .textBox {
		padding: 47vh 0 0;
	}
	#main .sec02 .imgBox02 .headLine01 {
		margin: 0 0 4.92vh 0;
	}
	#main .sec02 .imgBox02 p.en {
		margin-bottom: 4.31vh;
	}
	#main .sec02 .imgBox02 .comLink {
		margin-right: 0;
	}
	#main .sec02 .imgBox02 .photoBox {
		width: 37.5rem;
	}
	#main .sec02 .imgBox02 .img {
		width: 20rem;
		left: -16.2rem;
		top: 13vh;
	}
	#main .sec02 .imgBox02 .photo {
		height: 100vh;
		width: 37.5rem;
	}
	#main .sec02 .imgBox02 .photo .parallax {
		width: 49.2rem;
	}
	#main .sec02 .imgBox02 .photoBox .slick-dots {
		right: -2.7rem;
		bottom: 0.5rem;
	}
	#main .sec02 .imgBox03 {
		margin: 0 0 0 11rem;
		width: 53.2rem;
		height: 81.2rem;
		padding: 21.5rem 0 0;
	}
	#main .sec02 .imgBox03 .textBox {
		width: 25.2rem;
		margin: 0 0 0 auto;
	}
	#main .sec02 .imgBox03 .headLine01 {
		margin: 0 0 5.9rem 0;
	}
	#main .sec02 .imgBox03 .headLine02 {
		margin-bottom: 1.2rem;
		letter-spacing: 0.27em;
	}
	#main .sec02 .imgBox03 p.en {
		margin-bottom: 3.5rem;
	}
	#main .sec02 .imgBox03 .comLink {
		margin-right: 1rem;
		/*text-align: center;*/
	}
	#main .sec02 .imgBox03 .photo01 {
		top: 0;
		width: 20.4rem;
	}
	#main .sec02 .imgBox03 .photo02 {
		left: auto;
		right: 0;
		margin-left: 0;
		bottom: auto;
		top: 0;
		width: 19.4rem;
	}
	#main .sec02 .imgBox03 .photo03 {
		right: auto;
		margin-right: 0;
		top: 39%;
		left: 4.5rem;
		width: 19.4rem;
	}
	#main .sec02 .imgBox03 .photo04 {
		right: -12rem;
		bottom: 6rem;
		width: 22.6rem;
	}
	#main .sec02 .imgBox03 .photo05 {
		right: 3rem;
		bottom: -28rem;
		width: 19.4rem;
	}
	#main .sec02 .imgBox03 .photo06 {
		left: 1.5rem;
		margin-left: 0;
		bottom: -20rem;
		width: 19.4rem;
}
	.jsScrollBox {
		overflow: clip;
	}
	#main .stickyBox {
		height: 100vh;
		position: sticky;
		top: 0;
	}
	.jsFlex {
		height: 100vh;
		overflow: hidden;
	}
}