html {
	overscroll-behavior-y: none;
}
body {
	margin: 0;
	overflow-x: hidden;
	overscroll-behavior: none;
	background-color: #000;
	color: #fff;
	cursor: none;
}
body.is-loading,body.overflowHidden {
	overflow: hidden;
}
#main {
	font-size: 1.6vw;
	font-weight: 400;
	font-family: "Yu Mincho", "YuMincho", serif;
	line-height: 2.6vw;
	overflow-x: hidden;
}
@media screen and (max-width: 568px) {
	#main {
		font-size: 4vw;
		line-height: 7vw;
	}
}




.cursor {
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,1), rgba(0,200,255,1));
	position: fixed;
	pointer-events: none;
	transform: translate(-50%, -50%);
	mix-blend-mode: screen;
	filter: blur(2px);
	z-index: 999;
}
.hover {
	position: fixed;
	width: 10em;
	height: 10em;
	top: 0;
	left: 0;
	right: 0;
	border: solid 0.2em;
	border-radius: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: all 0.3s;
	z-index: 999;
	pointer-events: none;
}
.trail {
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,255,255,0.5));
	position: fixed;
	pointer-events: none;
	transform: translate(-50%, -50%);
	mix-blend-mode: screen;
	filter: blur(4px);
	opacity: 0.7;
	transition: transform 0.2s ease-out;
	z-index: 999;
}
@media screen and (max-width: 568px) {
	.cursor,.trail {
		display:none;
	}
}


.op{
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 500;
	opacity: 1;
	object-fit: cover;
}
@media screen and (max-width: 568px) {
	.op{
		top: 3.5%;
		height: 80vh;
	}
}
.skip_button{
	position: absolute;
	z-index: 999;
	right: 3em;
	bottom: 3em;
	background: #000;
	padding: 1em;
	border-radius: 2em;
}
.skip_button p{
	font-size: 1.5em;
	margin: 0;
}
header{
	position: fixed;
    width: 100%;
	z-index: 700;
}
header .logo{
	width: 10em;
	max-width: 7em;
	min-width: 5em;
	position: absolute;
	margin: 1.5em;
	opacity: 0;
}
header .logo img{
	width: 100%;
}
.contact_button{
	opacity: 0;
	position: absolute;
	right: 4em;
	top: 0.8em;
}
.contact_button a{
	display: block;
	font-size: 0.6em;
	color: #fff;
	border: solid 0.15em;
	border-radius: 2em;
	padding: 0em 0.5em;
	text-decoration: none;
}
.toggle_button {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 2em;
	height: 2em;
	cursor: pointer;
	color: #fff;
	z-index: 3;
	opacity: 0;
}
.toggle_button span {
	position: absolute;
	display: block;
	width: 1em;
	border-bottom: solid 0.1em;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
.toggle_button span:nth-child(1) {
	margin-top: 0.3em;
}
.toggle_button span:nth-child(2) {
	margin-top: 0.6em;
}
.toggle_button span:nth-child(3) {
	margin-top: 0.9em;
}
.toggle_button.active span:nth-child(1) {
	margin-top: 0.6em;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.toggle_button.active span:nth-child(2) {
	opacity: 0;
}
.toggle_button.active span:nth-child(3) {
	margin-top: 0.6em;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu_mode {
	visibility: hidden;
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	height: 100%;
	overflow: auto;
	width: 100%;
	transition: all 0.5s ease;
	opacity: 0;
	background-color: #000;
}
.menu_mode.open {
	visibility: unset;
	opacity: 1;
}
.menu_mode .menu {
	position: absolute;
	display: flex;
	inset: 0;
	align-items: center;
	justify-content: center;
}
.menu_mode .menu ul {
	padding: 0;
	margin: 0;
}
.menu_mode .menu ul li {
	list-style-type: none;
	margin: 2.5em 0;
	font-size: 1.5em;
	font-weight: 700;
	color: #fff;
	border-bottom: solid 0.05em;
}
.menu_mode .menu ul li span{
	font-size: 70%;
}





.loading_line{
	width: 0;
	height: 5vw;
	background: #fff;
	position: fixed;
	top: 45%;
	filter: blur(5vw);
}
.loading_text{
	opacity: 0;
	position: absolute;
	display: flex;
	align-items: center;
	z-index: 500;
	width: 10em;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 500;
}





.loading_text img{
	width: 100%;
}

.main_menu{
	position: absolute;
	inset: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	transform-style: preserve-3d;
	perspective: 90em;
	z-index: 600;
}
.main_menu .gallery__scene {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.main_menu .box{
	position: absolute;
	top:50%;
	left:50%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}



.main_menu .box video{
	width: 20em;
	height: 15em;
	object-fit: cover;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.main_menu .box p {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0;
	text-align: center;
}
.main_menu .box p span {
	font-size: 70%;
}

.scroll_text{
	opacity: 0;
	position: fixed;
	font-size: 2em;
	width: 100%;
	text-align: center;
	bottom: 1em;
}
.scroll_text p{
	margin: 0;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 2em;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
	position: absolute;
	top: 50%;/*着地点(cp_arrowsの高さの50%)*/
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 10px;
	opacity: 0;
}
.cp_arrows .cp_arrow:first-child {
	animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrow:nth-child(2)  {
	animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {/*矢印全体の設定*/
	position: absolute;
	content: '';
	top: 0;
	width: 30px;
	height: 3px;
	background: #fff;
}
.cp_arrows .cp_arrow:before {/*矢印左の線の位置と傾斜*/
	left: 3px;
	transform: rotate(30deg);
}
.cp_arrows .cp_arrow:after {/*矢印左の線の位置と傾斜*/
	right: 3px;
	transform: rotate(-30deg);
}
@keyframes arrow-move08 {
	0% { opacity: 0; top: 40%;/*スタート地点(cp_arrowsの高さの40%)*/}
	70% { opacity: 1;}
	100% { opacity: 0;}
}


.text1{
	position: absolute;
	justify-content: center;
	font-size: 2em;
	text-align: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: max-content;
	height: max-content;
	transform: translate3d(0, 15em, 0);
	z-index: 700;
}
.text2{
	opacity: 0;
	position: absolute;
	justify-content: center;
	line-height: 1.65em;
	text-align: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: max-content;
	height: max-content;
	transform: translate3d(0, 44em, 0);
	z-index: 700;
}
@media screen and (max-width: 568px) {
	.text2{
		letter-spacing: -0.04em;
	}
}

.text3{
	opacity: 0;
	position: absolute;
	justify-content: center;
	line-height: 1.8em;
	text-align: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: max-content;
	height: max-content;
	transform: translate3d(0, 55em, 0);
	z-index: 700;
}


.modal {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 90%);
	z-index: 500;
	opacity: 0;
	transition: all 0.3s;
}
.modal.open {
	visibility: unset;
	opacity: 1;
}
.modal .modal-close-button {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	font-size: 2.4em;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	z-index: 100;
	transform: translate(50%, -50%);
}
.modal-wrapper {
	position: absolute;
	width: 75vw;
	height: 25em;
	max-height: 45em;
	box-shadow: 0 0 1em 0.5em #fff;
	background: #000;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 800;
}
@media screen and (max-width: 568px) {
	.modal-wrapper {
		height: 35em;
	}
}
.modal-wrapper .back_video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.5;
}
.modal-content {
	position: absolute;
	margin: 1em;
	display: grid;
	inset: 0;
	align-items: center;
	justify-content: center;
}
.modal-content .area {
	width: 70%;
	margin: 0 auto;
	text-shadow: 0 0 0.5em rgba(0, 0, 0, 100);
	
}
@media screen and (max-width: 568px) {
	.modal-content .area {
		width: 100%;
	}
}
.modal-content .title {
	border-bottom: solid 0.1em;
	padding-bottom: 0.2em;
	font-size: 1.5em;
	text-align: center;
}
.modal-content .title span {
	font-size: 70%;
}
.modal-content .text {
	font-size: 0.7em;
	line-height: 1.7em;
}


@media screen and (max-width: 568px) {
	.modal-content .flexible .text {
		line-height: 1.2em;
	}
}
.modal-content .flexible{
	display: flex;
}
.modal-content .flexible .list1,.modal-content .flexible .list2{
	width: 50%;
}
.modal-content .flexible .list1{
	margin-right: 1em;
}
.modal-content .flexible .list1 .heading,.modal-content .flexible .list2 .heading{
	background-color: #fff;
	color: #000;
	width: 100%;
	font-size: 0.8em;
	text-align: center;
	margin: 0;
	border-radius: 0.5em;
}
.modal-content .flexible .list1 section{
	display: flex;
	flex-wrap: wrap;
	font-size: 0.5em;
	line-height: 1em;
}
.modal-content .flexible .list1 section.left{
	border-bottom: solid 0.2em;
}
@media screen and (max-width: 568px) {
	.modal-content .flexible .list1 section.left{
		margin: 0 0 0 0;
		border-bottom: solid 0.2em;
		border-right: none;
		padding: 0 0 0 0;
	}
}
.modal-content .flexible .list1 section p{
	width:50%;
}
@media screen and (max-width: 568px) {
	.modal-content .flexible .list1 section p{
		width:100%;
		margin: 0.5em 0;
	}
}

@media screen and (max-width: 568px) {
	.modal-content .flexible .list1,.modal-content .flexible .list2{
		display: block;
	}
}
.modal-content .flexible .list2 .box{
	font-size: 0.68em;
	border: solid 0.2em;
	line-height: 0.8em;
	padding: 0.4em;
	margin: 0.2em 0;
	border-radius: 0.5em;
	text-align: center;
}




.modal-content .pricing .columns,.modal-content .pricing .sub_columns{
	display: flex;
}
@media screen and (max-width: 568px) {
	.modal-content .pricing .columns,.modal-content .pricing .sub_columns{
		display: block;
	}
}
.modal-content .pricing .column{
	width: 50%;
}
@media screen and (max-width: 568px) {
	.modal-content .pricing .column{
		width: 100%;
	}
}
.modal-content .pricing .columns .column .sub_columns .sub_column:first-child{
	margin-right: 1em;
	width: 30%;
}
.modal-content .pricing .columns .column .sub_columns .sub_column:last-child{
	width: 60%;
}
@media screen and (max-width: 568px) {
	.modal-content .pricing .columns .column .sub_columns .sub_column:first-child,.modal-content .pricing .columns .column .sub_columns .sub_column:last-child{
		width: 100%;
	}
}
.modal-content .pricing .card{
	background: #fff;
	border-radius: 0.5em;
	color: #000;
	text-align: center;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width: 568px) {
	.modal-content .pricing .card{
		margin: 0;
	}
	.modal-content .pricing .card br{
		display:none;
	}
}
.modal-content .price_heading{
	border-bottom: solid 0.1em;
}
@media screen and (max-width: 568px) {
	.modal-content .price_heading{
		margin: 0;
	}
}
.modal-content .price_text{
	font-size: 0.7em;
	line-height: 1.5em;
}
@media screen and (max-width: 568px) {
	.modal-content .price_text{
		margin: 0.5em 0;
	}
}
.modal-content .pricing .supplement{
	font-size: 0.6em;
	line-height: 1.2em;
	margin-top: 5em;
	text-align: center;
}
@media screen and (max-width: 568px) {
	.modal-content .pricing .supplement{
		margin-top: 0;
	}
}

.modal-content .company .columns{
	display: flex;
}
@media screen and (max-width: 568px) {
	.modal-content .company .columns{
		display: block;
	}
}

.modal-content .company .columns .column{
	width: 15em;
}
@media screen and (max-width: 568px) {
	.modal-content .company .columns .column{
		width: 100%;
	}
}
.modal-content .company .logo{
	width: 75%;
	height: 100%;
	display: flex;
	align-items: center;
	margin: 0.5em auto;
}
.modal-content .company .logo img{
	width: 100%;
}
.modal-content .company .name{
	font-size: 1em;
	line-height: 0.5em;
	padding-bottom: 0.5em;
	margin-bottom: 0.2em;
	border-bottom: solid 0.1em;
}
.modal-content .company .name span{
	font-size: 45%;
	line-height: 1.5em;
	margin-right: 2em;
}
.modal-content .company p{
	font-size: 0.8em;
	margin:-0.2em;
}


.modal-checkbox:checked + .modal {
	display: flex;
}





.modal-window-conts {
	display: flex;
	justify-content: center;
}

.thumb p{
	background: rgb(255, 255, 255, 0.5);
	padding: 0.5em 1em;
	border-radius: 0.5em;
	color: #000;
	text-shadow: 0 0 0.2em #fff;
	box-shadow: 0 0 1em 0.5em #000;
}
/*/// video-conts ///*/
.video-conts {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,.7);
	visibility: hidden; /* 非表示にしておく */
	opacity: 0; /* 非表示にしておく */
	transition: all .3s;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

/*/// video-conts(active) ///*/
.video-conts.active {
	visibility: visible;
	opacity: 1;
}

#videoPlayer {
	max-width: 1000px;
	width: 100%;
}

/*/// Close Button ///*/
.video-wrap {
	position: relative;
}

.video-close {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	border: 1px solid #000;
	cursor: pointer;
}