@charset "UTF-8";
/* Version: 2.0.0 */
/* ================================== */
/* base */
/* ================================== */
html {
	font-family: "Roboto", sans-serif;
}
@media (min-width: 768px) {
	html {
		font-size: 0.8333333333vw;
	}
}
@media (max-width: 767px) {
	html {
		font-size: 3.7333333333vw;
	}
}

body {
	width: 100%;
	height: 100%;
}
body.fixed {
	position: fixed;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

@media (min-width: 768px) {
	.pc-only {
		display: inherit;
	}
	.sp-only {
		display: none !important;
	}
}
@media (max-width: 767px) {
	.pc-only {
		display: none !important;
	}
	.sp-only {
		display: inherit;
	}
}
a {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: 0 0;
	text-decoration: none;
	color: inherit;
	transition-duration: 0.2s;
	transition-property: background-color, color;
}

#main img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

#main {
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 2;
	font-feature-settings: "palt";
	text-align: left;
	color: #fff;
	background-color: #000;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) {
	#main {
		font-size: 1.6rem !important;
	}
}
@media (max-width: 767px) {
	#main {
		font-size: 1.05rem;
	}
}
body[data-lang=ja] #main {
	font-weight: 800;
}
@media (min-width: 768px) {
	body[data-lang=ja] #main {
		font-size: 1.9rem;
	}
}
@media (max-width: 767px) {
	body[data-lang=ja] #main {
		font-size: 1.05rem;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main {
		line-height: 2.2;
	}
}

#main {
	position: relative;
}
#main section {
	position: relative;
	padding: 3rem 0 2.6rem;
	overflow: hidden;
}
@media (min-width: 768px) {
	#main section {
		height: 100svh;
	}
}
@media (min-width: 768px) {
	#main section {
		min-height: 33.3333333333vw;
	}
}
@media (min-width: 768px) {
	#main section {
		max-height: 56.25vw;
	}
}
@media (max-width: 767px) {
	#main section .section-col.text {
		width: 100%;
	}
}
@media (max-width: 767px) {
	#main section .section-col.text {
		padding-left: 5.3333333333vw;
	}
}
@media (max-width: 767px) {
	#main section .section-col.text {
		padding-right: 5.3333333333vw;
	}
}
#main section .section-col.text h2 {
	line-height: 1.3;
	margin-bottom: 0.6em;
}
@media (min-width: 768px) {
	#main section .section-col.text h2 {
		font-size: 2.7em;
	}
}
@media (max-width: 767px) {
	#main section .section-col.text h2 {
		font-size: 2.4rem;
	}
}
body[data-lang=en] #main section .section-col.text h2 {
	font-weight: 600;
}
#main section .section-col.text p.large {
	font-size: 1.3em;
	line-height: 2;
}
@media (min-width: 768px) {
	#main section .section-col.text p.small {
		font-size: 1.5rem;
	}
}
#main section .section-col.text p.narrow {
	line-height: 1.8;
}
#main section .section-col.text p + p {
	margin-top: 1em;
}
#main section.cols {
	display: flex;
	align-items: center;
}
@media (min-width: 768px) {
	#main section.cols {
		justify-content: center;
	}
	#main section.cols.reverse {
		flex-direction: row-reverse;
	}
}
@media (max-width: 767px) {
	#main section.cols {
		flex-direction: column;
	}
}
@media (min-width: 768px) {
	#main section.cols .section-col {
		width: 36.4583333333vw;
	}
}
#main section.cols .section-col.image {
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (max-width: 767px) {
	#main section.cols .section-col.image {
		padding-top: 2.6666666667vw;
	}
}
@media (min-width: 768px) {
	#main section.cols .section-col.image {
		justify-content: center;
		height: 100%;
	}
}
@media (max-width: 767px) {
	#main section.cols .section-col.image {
		width: 100%;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.cols:not(.reverse) .section-col.text {
		padding-right: 6rem;
	}
}
#main section figure.section-image {
	position: relative;
	font-size: 0;
	line-height: 1;
}

@keyframes overlay-flash {
	0% {
		display: block;
		background-color: rgba(255, 255, 255, 0.75);
		-webkit-backdrop-filter: blur(8rem);
		backdrop-filter: blur(8rem);
		opacity: 1;
	}
	99% {
		display: block;
		-webkit-backdrop-filter: blur(0rem);
		backdrop-filter: blur(0rem);
		opacity: 0;
	}
	100% {
		display: none;
		opacity: 0;
	}
}
.overlay-w {
	z-index: 9999;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	pointer-events: none;
}
.overlay-w.flash {
	animation-name: overlay-flash;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}

/* ================================== */
/* sections */
/* ================================== */
#main .scroll-arrow {
	z-index: 100;
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
#main .scroll-arrow .arrow-wrap {
	display: flex;
	flex-direction: column;
	width: -moz-fit-content;
	width: fit-content;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s linear, transform 0.6s ease-out;
}
@media (min-width: 768px) {
	#main .scroll-arrow .arrow-wrap {
		margin-bottom: -1.0416666667vw;
	}
}
@media (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap {
		margin-bottom: -1.3333333333vw;
	}
}
@media (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap {
		background-color: rgba(0, 0, 0, 0.5);
	}
}
@media (max-width: 767px) and (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap {
		width: 24vw;
	}
}
@media (max-width: 767px) and (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap {
		height: 12vw;
	}
}
@media (max-width: 767px) and (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap {
		border-top-left-radius: 12vw;
	}
}
@media (max-width: 767px) and (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap {
		border-top-right-radius: 12vw;
	}
}
@media (max-width: 767px) and (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap {
		padding-top: 1.3333333333vw;
	}
}
#main .scroll-arrow .arrow-wrap .label {
	position: relative;
}
@media (min-width: 768px) {
	#main .scroll-arrow .arrow-wrap .label {
		font-size: 1rem;
	}
}
@media (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap .label {
		font-size: 0.75rem;
	}
}
@media (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap .label {
		font-weight: 700;
	}
}
#main .scroll-arrow .arrow-wrap .label p {
	text-align: center;
}
#main .scroll-arrow .arrow-wrap .arrows {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	-webkit-mask-image: linear-gradient(to bottom, transparent 1%, black 25%, black 75%, transparent 99%);
	mask-image: linear-gradient(to bottom, transparent 1%, black 25%, black 75%, transparent 99%);
}
@media (min-width: 768px) {
	#main .scroll-arrow .arrow-wrap .arrows {
		height: 3.125vw;
	}
}
@media (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap .arrows {
		height: 5.328vw;
	}
}
@keyframes arrow-movement {
	0% {
		transform: translateY(-50%);
	}
	100% {
		transform: translateY(200%);
	}
}
#main .scroll-arrow .arrow-wrap .arrows svg.arrow {
	position: absolute;
	height: auto;
	top: 0;
	animation-name: arrow-movement;
	animation-duration: 1.8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@media (min-width: 768px) {
	#main .scroll-arrow .arrow-wrap .arrows svg.arrow {
		width: 3.125vw;
	}
}
@media (max-width: 767px) {
	#main .scroll-arrow .arrow-wrap .arrows svg.arrow {
		width: 5.328vw;
	}
}
#main .scroll-arrow .arrow-wrap .arrows svg.arrow path {
	stroke: #fff;
	stroke-width: 2;
	fill: none;
}
#main .scroll-arrow .arrow-wrap .arrows svg.arrow:nth-child(2) {
	animation-delay: -0.9s;
}
#main .scroll-arrow.is-scrolled .arrow-wrap {
	opacity: 0;
	transform: translateY(100%);
}
#main .scroll-arrow.is-scrolled .arrow-wrap .arrows svg.arrow {
	animation-play-state: paused;
}
#main section .section-col.text.scroll-in.blur-in h2, #main section .section-col.text.scroll-in.blur-in p {
	opacity: 0;
	filter: blur(1rem);
	transform: translateY(4rem);
	transition: opacity linear, filter ease-out, transform ease-out;
	transition-duration: 1s;
}
#main section .section-col.text.scroll-in.blur-in h2:nth-child(1), #main section .section-col.text.scroll-in.blur-in p:nth-child(1) {
	transition-delay: 0s;
}
#main section .section-col.text.scroll-in.blur-in h2:nth-child(2), #main section .section-col.text.scroll-in.blur-in p:nth-child(2) {
	transition-delay: 0.5s;
}
#main section .section-col.text.scroll-in.blur-in h2:nth-child(3), #main section .section-col.text.scroll-in.blur-in p:nth-child(3) {
	transition-delay: 1s;
}
#main section .section-col.text.scroll-in.blur-in h2:nth-child(4), #main section .section-col.text.scroll-in.blur-in p:nth-child(4) {
	transition-delay: 1.5s;
}
#main section .section-col.text.scroll-in.blur-in h2:nth-child(5), #main section .section-col.text.scroll-in.blur-in p:nth-child(5) {
	transition-delay: 2s;
}
#main section .section-col.text.scroll-in.blur-in.is-in h2, #main section .section-col.text.scroll-in.blur-in.is-in p {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}
#main section.mv {
	background-size: cover;
	background-position: 50% 50%;
	padding: 8rem 0;
}
@media (min-width: 768px) {
	#main section.mv {
		height: calc(100svh - 100px);
	}
}
@media (min-width: 768px) {
	#main section.mv {
		min-height: 50vw;
	}
}
@media (min-width: 768px) {
	#main section.mv {
		max-height: 66.66vw;
	}
}
@media (max-width: 767px) {
	#main section.mv {
		background-image: none !important;
		color: #fff;
		background-color: rgb(64, 195, 195);
		padding: 0 0;
	}
}
#main section.mv .section-col {
	position: relative;
}
#main section.mv .section-col.text {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-end;
}
@media (min-width: 768px) {
	#main section.mv .section-col.text {
		width: 36.4583333333vw;
	}
}
@media (max-width: 767px) {
	#main section.mv .section-col.text {
		width: 100%;
	}
}
@media (min-width: 768px) {
	#main section.mv .section-col.text {
		left: 4.6875vw;
	}
}
#main section.mv .section-col.text h1 {
	line-height: 1.4;
}
@media (min-width: 768px) {
	#main section.mv .section-col.text h1 {
		font-size: 4rem;
	}
}
@media (max-width: 767px) {
	#main section.mv .section-col.text h1 {
		font-size: 2.3rem;
	}
}
@media (min-width: 768px) {
	#main section.mv .section-col.text h1 {
		margin-top: 6rem;
	}
}
@media (max-width: 767px) {
	#main section.mv .section-col.text h1 {
		margin-top: 2rem;
	}
}
body[data-lang=ja] #main section.mv .section-col.text h1 {
	letter-spacing: 0.11em;
}
body[data-lang=en] #main section.mv .section-col.text h1 {
	font-weight: 800;
}
#main section.mv .section-col.text p {
	line-height: 2.2;
}
@media (min-width: 768px) {
	#main section.mv .section-col.text p {
		font-size: 1.6rem;
	}
}
@media (max-width: 767px) {
	#main section.mv .section-col.text p {
		font-size: 1.05rem;
	}
}
body[data-lang=en] #main section.mv .section-col.text p {
	padding-right: 2rem;
}
@media (max-width: 767px) {
	#main section.mv .section-col.text {
		margin-top: -6rem;
		padding-bottom: 3rem;
	}
	body[data-lang=en] #main section.mv .section-col.text {
		margin-top: -5.3rem;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.mv .section-col.text h1 {
		font-size: 4.4rem;
	}
}
@media (max-width: 767px) {
	body[data-lang=en] #main section.mv .section-col.text h1 {
		font-size: 2.5rem;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.mv .section-col.text p {
		font-size: 1.7rem;
	}
}
@media (max-width: 767px) {
	body[data-lang=en] #main section.mv .section-col.text p {
		font-size: 1.05rem;
	}
}
@media (max-width: 767px) {
	#main section.mv .section-col.image {
		height: 125vw;
	}
}
@media (max-width: 767px) {
	#main section.mv .section-col.image {
		background-size: 200vw auto;
		background-position: 50% 50%;
	}
}
#main section.video {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: rgb(217, 255, 255);
	background-color: rgb(200, 93, 133);
	padding: 4rem 0;
}
@media (max-width: 767px) {
	#main section.video {
		padding: 6rem 0;
	}
}
#main section.video .block.video {
	cursor: pointer;
}
#main section.video .block.video .video-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
#main section.video .block.video .video-container .play-btn {
	z-index: 2;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	border: rgb(217, 255, 255) solid;
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container .play-btn {
		width: 7.2916666667vw;
	}
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container .play-btn {
		width: 14.5833333333vw;
	}
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container .play-btn {
		height: 7.2916666667vw;
	}
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container .play-btn {
		height: 14.5833333333vw;
	}
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container .play-btn {
		border-radius: 3.6458333333vw;
	}
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container .play-btn {
		border-radius: 7.2916666667vw;
	}
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container .play-btn {
		border-width: 0.3125vw;
	}
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container .play-btn {
		border-width: 0.8vw;
	}
}
#main section.video .block.video .video-container .play-btn svg {
	fill: rgb(217, 255, 255);
	stroke: 0;
	margin-left: 10%;
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container .play-btn svg {
		width: 3.125vw;
	}
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container .play-btn svg {
		width: 6.25vw;
	}
}
#main section.video .block.video .video-container {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: all 0.3s ease-out;
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container {
		width: 66.6666666667vw;
	}
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container {
		width: 89.3333333333vw;
	}
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container {
		height: 37.5vw;
	}
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container {
		height: 50.25vw;
	}
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container {
		border-radius: 2.0833333333vw;
	}
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container {
		border-radius: 4.1666666667vw;
	}
}
#main section.video .block.video .video-container:after {
	z-index: 0;
	content: "";
	position: absolute;
	display: block;
}
#main section.video .block.video .video-container::after {
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}
#main section.video .block.video .video-container video {
	width: 105%;
	height: 105%;
}
@media (max-width: 767px) {
	#main section.video .block.video .video-container video {
		width: 100%;
		height: 100%;
	}
}
@media (min-width: 768px) and (min-width: 768px) {
	#main section.video .block.video .video-container:hover {
		width: 68.3333333333vw;
	}
}
@media (min-width: 768px) and (min-width: 768px) {
	#main section.video .block.video .video-container:hover {
		height: 38.4375vw;
	}
}
@media (min-width: 768px) {
	#main section.video .block.video .video-container:hover .play-btn {
		animation-name: btn-hover;
		animation-duration: 0.3s;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}
	@keyframes btn-hover {
		0% {
			transform: scale(1);
		}
		5% {
			transform: scale(1.0133974596);
		}
		10% {
			transform: scale(1.05);
		}
		15% {
			transform: scale(1.1);
		}
		20% {
			transform: scale(1.15);
		}
		25% {
			transform: scale(1.1866025404);
		}
		30% {
			transform: scale(1.2);
		}
		34.6666666667% {
			transform: scale(1.1978147601);
		}
		39.3333333333% {
			transform: scale(1.1913545458);
		}
		44% {
			transform: scale(1.1809016994);
		}
		48.6666666667% {
			transform: scale(1.1669130606);
		}
		53.3333333333% {
			transform: scale(1.15);
		}
		58% {
			transform: scale(1.1309016994);
		}
		62.6666666667% {
			transform: scale(1.1104528463);
		}
		67.3333333333% {
			transform: scale(1.0895471537);
		}
		72% {
			transform: scale(1.0690983006);
		}
		76.6666666667% {
			transform: scale(1.05);
		}
		81.3333333333% {
			transform: scale(1.0330869394);
		}
		86% {
			transform: scale(1.0190983006);
		}
		90.6666666667% {
			transform: scale(1.0086454542);
		}
		95.3333333333% {
			transform: scale(1.0021852399);
		}
		100% {
			transform: scale(1);
		}
	}
}
#main section.video .block.video .video-title {
	line-height: 1.2;
	margin-top: 1em;
}
#main section.video .block.video .video-title p {
	text-align: center;
}
body[data-lang=ja] #main section.video .block.video .video-title p {
	letter-spacing: 0.1em;
}
#main section.film {
	color: rgb(255, 217, 64);
	background-color: rgb(0, 30, 98);
}
@media (min-width: 768px) {
	#main section.film figure.section-image {
		width: 42.1875vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image {
		width: 93.75vw;
	}
}
@media (min-width: 768px) {
	#main section.film figure.section-image {
		height: 37.5vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image {
		height: 83.3333333333vw;
	}
}
@media (min-width: 768px) {
	#main section.film figure.section-image {
		margin-left: -5.625vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image {
		margin-left: 0vw;
	}
}
@media (min-width: 768px) {
	#main section.film figure.section-image {
		margin-top: -1.40625vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image {
		margin-top: 0;
	}
}
#main section.film figure.section-image .image-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
#main section.film figure.section-image .components {
	position: relative;
	left: 5%;
	top: 41%;
}
@media (min-width: 768px) {
	#main section.film figure.section-image .components {
		width: 29.2809571875vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .components {
		width: 65.06879375vw;
	}
}
@media (min-width: 768px) {
	#main section.film figure.section-image .components {
		height: 16.062339375vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .components {
		height: 35.6940875vw;
	}
}
#main section.film figure.section-image .components .component-group {
	z-index: 2;
	position: absolute;
	left: 5%;
	top: 3%;
}
#main section.film figure.section-image .components .component {
	position: absolute;
}
#main section.film figure.section-image .components .component.c-1 {
	z-index: 5;
	left: 55%;
	top: 5%;
}
@media (min-width: 768px) {
	#main section.film figure.section-image .components .component.c-1 {
		width: 10.2498975vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .components .component.c-1 {
		width: 22.77755vw;
	}
}
#main section.film figure.section-image .components .component.c-2 {
	z-index: 6;
	left: 10%;
	top: 6.5%;
}
@media (min-width: 768px) {
	#main section.film figure.section-image .components .component.c-2 {
		width: 21.2185378125vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .components .component.c-2 {
		width: 47.15230625vw;
	}
}
#main section.film figure.section-image .components .component.c-3 {
	z-index: 4;
	left: -2.5%;
	top: 52%;
}
@media (min-width: 768px) {
	#main section.film figure.section-image .components .component.c-3 {
		width: 11.6561334375vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .components .component.c-3 {
		width: 25.90251875vw;
	}
}
#main section.film figure.section-image .components .component.c-4 {
	z-index: 3;
}
@media (min-width: 768px) {
	#main section.film figure.section-image .components .component.c-4 {
		width: 16.4685853125vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .components .component.c-4 {
		width: 36.59685625vw;
	}
}
#main section.film figure.section-image .components .component.c-4.l {
	left: 0%;
	top: 0%;
}
#main section.film figure.section-image .components .component.c-4.r {
	left: 35%;
	top: 35%;
}
#main section.film figure.section-image .components .component.c-5 {
	z-index: 2;
	position: relative;
	left: 0;
	top: 0;
}
@media (min-width: 768px) {
	#main section.film figure.section-image .components .component.c-5 {
		width: 25.62474375vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .components .component.c-5 {
		width: 56.943875vw;
	}
}
#main section.film figure.section-image .components .component.c-6 {
	z-index: 1;
	position: relative;
	left: 0;
	top: 0;
}
@media (min-width: 768px) {
	#main section.film figure.section-image .components .component.c-6 {
		width: 29.2809571875vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .components .component.c-6 {
		width: 65.06879375vw;
	}
}
#main section.film figure.section-image .film-all {
	position: absolute;
	right: 0;
	bottom: 0;
}
@media (min-width: 768px) {
	#main section.film figure.section-image .film-all {
		width: 25.37474625vw;
	}
}
@media (max-width: 767px) {
	#main section.film figure.section-image .film-all {
		width: 56.388325vw;
	}
}
#main section.film figure.section-image.scroll-in .image-wrap {
	transition: opacity 1s linear, transform 1s ease-out;
	transition-delay: 0;
	transform: translate(-15%, -9%);
}
#main section.film figure.section-image.scroll-in .components {
	transition: opacity 1s linear, transform 1s ease-out;
	transition-delay: 0;
	opacity: 0;
	transform: translate(30%, 30%);
}
#main section.film figure.section-image.scroll-in .component-group {
	transition: opacity 0.66s, transform 1.6s cubic-bezier(0.08, 0.445, 0.495, 0.96);
	transition-delay: 0.9s;
	opacity: 0;
	transform: translateY(0);
}
#main section.film figure.section-image.scroll-in .component.c-1 {
	opacity: 0;
	transform: translateY(0);
	transition: opacity 0.66s, transform 1.6s cubic-bezier(0.135, 0.255, 0.435, 0.93);
	transition-delay: 1.2s;
}
#main section.film figure.section-image.scroll-in .component.c-2 {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.66s, transform 1.6s cubic-bezier(0.135, 0.255, 0.435, 0.93);
	transition-delay: 1.2s;
}
#main section.film figure.section-image.scroll-in .component.c-3 {
	opacity: 0;
	transform: translateY(0);
	transition: opacity 0.66s, transform 1.6s cubic-bezier(0.135, 0.255, 0.435, 0.93);
	transition-delay: 1.2s;
}
#main section.film figure.section-image.scroll-in .component.c-4 {
	opacity: 0;
	transform: translateY(0);
	transition: opacity 0.66s, transform 1.6s cubic-bezier(0.135, 0.255, 0.435, 0.93);
	transition-delay: 1.2s;
}
#main section.film figure.section-image.scroll-in.is-in .image-wrap {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
#main section.film figure.section-image.scroll-in.is-in .components {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
#main section.film figure.section-image.scroll-in.is-in .component-group {
	opacity: 1;
	transform: translateY(-45%);
}
#main section.film figure.section-image.scroll-in.is-in .component.c-1 {
	opacity: 1;
	transform: translateY(-150%);
}
#main section.film figure.section-image.scroll-in.is-in .component.c-2 {
	opacity: 1;
	transform: translateY(-57.5%);
}
#main section.film figure.section-image.scroll-in.is-in .component.c-3 {
	opacity: 1;
	transform: translateY(-80%);
}
#main section.film figure.section-image.scroll-in.is-in .component.c-4 {
	opacity: 1;
	transform: translateY(-15%);
}
#main section.lens {
	color: rgb(0, 30, 98);
	background-color: rgb(64, 195, 195);
}
#main section.lens figure.section-image {
	align-self: flex-start;
}
@media (min-width: 768px) {
	#main section.lens figure.section-image {
		width: 23.95809375vw;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image {
		width: 47.9161875vw;
	}
}
@media (min-width: 768px) {
	#main section.lens figure.section-image {
		height: 33.95799375vw;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image {
		height: 67.9159875vw;
	}
}
@media (min-width: 768px) {
	#main section.lens figure.section-image {
		margin-left: 0;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image {
		margin-left: 8vw;
	}
}
@media (min-width: 768px) {
	#main section.lens figure.section-image {
		margin-top: -4.1666666667vw;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image {
		margin-top: 5.3333333333vw;
	}
}
#main section.lens figure.section-image .camera-body {
	position: absolute;
}
@media (min-width: 768px) {
	#main section.lens figure.section-image .camera-body {
		width: 23.95809375vw;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image .camera-body {
		width: 47.9161875vw;
	}
}
#main section.lens figure.section-image .camera-light {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 27%;
	top: 41%;
}
@media (min-width: 768px) {
	#main section.lens figure.section-image .camera-light {
		width: 24.37475625vw;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image .camera-light {
		width: 48.7495125vw;
	}
}
@media (min-width: 768px) {
	#main section.lens figure.section-image .camera-light {
		height: 12.499875vw;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image .camera-light {
		height: 24.99975vw;
	}
}
#main section.lens figure.section-image .camera-light .beam-wrap {
	z-index: 2;
	position: absolute;
	left: -2%;
	-webkit-mask-image: linear-gradient(to right, black 0%, black 80%, transparent 99%);
	mask-image: linear-gradient(to right, black 0%, black 80%, transparent 99%);
}
@media (min-width: 768px) {
	#main section.lens figure.section-image .camera-light .beam-wrap {
		width: 26.812231875vw;
	}
}
#main section.lens figure.section-image .camera-light .beam-wrap.b-1 {
	top: -2%;
}
#main section.lens figure.section-image .camera-light .beam-wrap.b-2 {
	bottom: -2%;
}
#main section.lens figure.section-image .camera-light .beam {
	position: relative;
}
@media (min-width: 768px) {
	#main section.lens figure.section-image .camera-light .beam {
		width: 24.965028125vw;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image .camera-light .beam {
		width: 49.93005625vw;
	}
}
#main section.lens figure.section-image .camera-light .arrow {
	z-index: 1;
	position: relative;
}
@media (min-width: 768px) {
	#main section.lens figure.section-image .camera-light .arrow {
		width: 24.37475625vw;
	}
}
@media (max-width: 767px) {
	#main section.lens figure.section-image .camera-light .arrow {
		width: 48.7495125vw;
	}
}
#main section.lens figure.section-image.scroll-in {
	transition: opacity 1.056s linear, transform 1.6s cubic-bezier(0.23, 0.57, 0.515, 1);
	opacity: 0;
	transform: translate(-33.33%, 0);
}
#main section.lens figure.section-image.scroll-in .camera-light .arrow {
	opacity: 0;
	transform: translateX(25%);
	transition: opacity 0.792s linear, transform 1.2s ease-out;
	transition-delay: 1.2s;
}
#main section.lens figure.section-image.scroll-in .camera-light .beam-wrap.b-1 .beam {
	transform: translate(100%, -90%);
}
#main section.lens figure.section-image.scroll-in .camera-light .beam-wrap.b-2 .beam {
	transform: translate(100%, 90%);
}
#main section.lens figure.section-image.scroll-in .camera-light .beam {
	opacity: 1;
	transition: opacity 0.792s linear, transform 1.2s ease-out;
	transition-delay: 0.8s;
}
#main section.lens figure.section-image.scroll-in.is-in {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
#main section.lens figure.section-image.scroll-in.is-in .camera-light .arrow {
	opacity: 1;
	transform: translateX(0);
}
#main section.lens figure.section-image.scroll-in.is-in .camera-light .beam-wrap.b-1 .beam {
	transform: translate(0, 0);
}
#main section.lens figure.section-image.scroll-in.is-in .camera-light .beam-wrap.b-2 .beam {
	transform: translate(0, 0);
}
#main section.layers {
	color: rgb(255, 128, 38);
	background-color: rgb(0, 103, 127);
}
@media (min-width: 768px) {
	#main section.layers figure.section-image {
		width: 40.625vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image {
		width: 81.25vw;
	}
}
@media (min-width: 768px) {
	#main section.layers figure.section-image {
		height: 29.1666666667vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image {
		height: 58.3333333333vw;
	}
}
@media (min-width: 768px) {
	#main section.layers figure.section-image {
		margin-left: -0.5208333333vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image {
		margin-left: -4.8vw;
	}
}
@media (min-width: 768px) {
	#main section.layers figure.section-image {
		margin-top: 0;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image {
		margin-top: 13.3333333333vw;
	}
}
#main section.layers figure.section-image .layers {
	position: relative;
	width: 100%;
	height: 100%;
}
#main section.layers figure.section-image .layers .layer-group {
	position: absolute;
	left: 2.25%;
	top: 11.5%;
}
#main section.layers figure.section-image .layers .layer-group[data-id="1"] {
	z-index: 1;
}
#main section.layers figure.section-image .layers .layer-group[data-id="2"] {
	z-index: 2;
}
#main section.layers figure.section-image .layers .layer-group[data-id="3"] {
	z-index: 3;
}
#main section.layers figure.section-image .layers .layer-group[data-id="4"] {
	z-index: 4;
}
#main section.layers figure.section-image .layers .layer-group[data-id="5"] {
	z-index: 5;
}
#main section.layers figure.section-image .layers .layer-group[data-id="6"] {
	z-index: 6;
}
#main section.layers figure.section-image .layers .layer-group[data-id="6"] .layer {
	z-index: 0;
	position: relative;
}
#main section.layers figure.section-image .layers .layer {
	position: absolute;
	top: 0;
	left: 0;
}
#main section.layers figure.section-image .layers .layer.l-1, #main section.layers figure.section-image .layers .layer.l-2 {
	top: -4%;
}
#main section.layers figure.section-image .layers .layer.l-1 {
	z-index: 1;
}
@media (min-width: 768px) {
	#main section.layers figure.section-image .layers .layer.l-1 {
		width: 10.798503125vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image .layers .layer.l-1 {
		width: 21.59700625vw;
	}
}
#main section.layers figure.section-image .layers .layer.l-2 {
	z-index: 18;
}
@media (min-width: 768px) {
	#main section.layers figure.section-image .layers .layer.l-2 {
		width: 10.798503125vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image .layers .layer.l-2 {
		width: 21.59700625vw;
	}
}
#main section.layers figure.section-image .layers .layer.l-3 {
	z-index: 17;
	left: 0.5%;
	top: -5%;
}
@media (min-width: 768px) {
	#main section.layers figure.section-image .layers .layer.l-3 {
		width: 9.44435vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image .layers .layer.l-3 {
		width: 18.8887vw;
	}
}
@media (min-width: 768px) {
	#main section.layers figure.section-image .layers .layer.color {
		width: 9.44435vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image .layers .layer.color {
		width: 18.8887vw;
	}
}
#main section.layers figure.section-image .layers .layer[data-id="1"] {
	z-index: 1;
}
#main section.layers figure.section-image .layers .layer[data-id="2"] {
	z-index: 2;
}
#main section.layers figure.section-image .layers .layer[data-id="3"] {
	z-index: 3;
}
#main section.layers figure.section-image .layers .layer[data-id="4"] {
	z-index: 4;
}
#main section.layers figure.section-image .layers .layer[data-id="5"] {
	z-index: 5;
}
#main section.layers figure.section-image .layers .layer[data-id="6"] {
	z-index: 6;
}
#main section.layers figure.section-image .layers .layer[data-id="7"] {
	z-index: 7;
}
#main section.layers figure.section-image .layers .layer[data-id="8"] {
	z-index: 8;
}
#main section.layers figure.section-image .layers .layer[data-id="9"] {
	z-index: 9;
}
#main section.layers figure.section-image .layers .layer[data-id="10"] {
	z-index: 10;
}
#main section.layers figure.section-image .layers .layer[data-id="11"] {
	z-index: 11;
}
#main section.layers figure.section-image .layers .layer[data-id="12"] {
	z-index: 12;
}
#main section.layers figure.section-image .layers .layer[data-id="13"] {
	z-index: 13;
}
#main section.layers figure.section-image .layers .layer[data-id="14"] {
	z-index: 14;
}
#main section.layers figure.section-image .layers .layer[data-id="15"] {
	z-index: 15;
}
#main section.layers figure.section-image .layers .layer[data-id="16"] {
	z-index: 16;
}
#main section.layers figure.section-image .arrow {
	z-index: 20;
	position: absolute;
	left: 90%;
	top: 35%;
}
@media (min-width: 768px) {
	#main section.layers figure.section-image .arrow {
		width: 7.256871875vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image .arrow {
		width: 14.51374375vw;
	}
}
#main section.layers figure.section-image .layers-label {
	z-index: 20;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	left: 25%;
	top: -20%;
}
@media (min-width: 768px) {
	#main section.layers figure.section-image .layers-label {
		font-size: 1.4583333333vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image .layers-label {
		font-size: 2.9166666667vw;
	}
}
@media (min-width: 768px) {
	#main section.layers figure.section-image .layers-label {
		width: 31.5104166667vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image .layers-label {
		width: 63.0208333333vw;
	}
}
#main section.layers figure.section-image .layers-label .label {
	position: relative;
	margin-bottom: 0.5em;
}
#main section.layers figure.section-image .layers-label .label p {
	text-align: center;
}
body[data-lang=ja] #main section.layers figure.section-image .layers-label .label p {
	letter-spacing: 0.1em;
}
#main section.layers figure.section-image .layers-label .lines {
	position: relative;
	width: 100%;
	border: 1px rgb(255, 128, 38) solid;
	border-bottom: none;
}
@media (min-width: 768px) {
	#main section.layers figure.section-image .layers-label .lines {
		height: 1.5625vw;
	}
}
@media (max-width: 767px) {
	#main section.layers figure.section-image .layers-label .lines {
		height: 3.125vw;
	}
}
#main section.layers figure.section-image.scroll-in .layers {
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.6s linear;
	transform: translateX(30%);
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="1"] {
	transform: translateX(0);
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1) 0s;
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="2"] {
	transform: translateX(0);
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1) 0s;
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="3"] {
	transform: translateX(0);
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1) 0s;
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="4"] {
	transform: translateX(0);
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1) 0s;
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="5"] {
	transform: translateX(0);
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1) 0s;
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="2"] .layer.l-w {
	opacity: 0;
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="3"] .layer.l-w {
	opacity: 0;
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="4"] .layer.l-w {
	opacity: 0;
}
#main section.layers figure.section-image.scroll-in .layer-group[data-id="5"] .layer.l-w {
	opacity: 0;
}
#main section.layers figure.section-image.scroll-in .layer-group .layer:first-child {
	position: relative;
}
#main section.layers figure.section-image.scroll-in .layer-group .layer:nth-child(1) {
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.1s linear;
	transition-delay: 0s;
}
#main section.layers figure.section-image.scroll-in .layer-group .layer:nth-child(2) {
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.1s linear;
	transition-delay: 0s;
}
#main section.layers figure.section-image.scroll-in .layer-group .layer:nth-child(3) {
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.1s linear;
	transition-delay: 0s;
}
#main section.layers figure.section-image.scroll-in .layer-group .layer:nth-child(4) {
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.1s linear;
	transition-delay: 0s;
}
#main section.layers figure.section-image.scroll-in .layer {
	transform: translateX(0);
}
#main section.layers figure.section-image.scroll-in .layer.l-2 {
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1) 0s;
}
#main section.layers figure.section-image.scroll-in .layer.l-3 {
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1) 0s;
}
#main section.layers figure.section-image.scroll-in .arrow {
	transition: transform 0.6s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.396s linear;
	transition-delay: 1.55s;
	opacity: 0;
	transform: translateX(50%);
}
#main section.layers figure.section-image.scroll-in .layers-label .label {
	transition: transform 0.6s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.396s linear;
	transition-delay: 0.4s;
	opacity: 0;
	transform: translateY(1em);
}
#main section.layers figure.section-image.scroll-in .layers-label .lines {
	transition: transform 1.75s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.05s linear;
	transition-delay: 0s;
	opacity: 0;
	transform: scale(0, 1);
	transform-origin: 50% 50%;
}
#main section.layers figure.section-image.scroll-in.is-in .layers {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group[data-id="1"] {
	transform: translateX(30%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group[data-id="2"] {
	transform: translateX(98%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group[data-id="3"] {
	transform: translateX(149%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group[data-id="4"] {
	transform: translateX(200%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group[data-id="5"] {
	transform: translateX(251%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group .layer:nth-child(2) {
	transform: translateX(17%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group .layer:nth-child(3) {
	transform: translateX(34%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group .layer:nth-child(4) {
	transform: translateX(51%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group .layer:nth-child(1) {
	opacity: 1;
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group .layer:nth-child(2) {
	opacity: 1;
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group .layer:nth-child(3) {
	opacity: 1;
}
#main section.layers figure.section-image.scroll-in.is-in .layer-group .layer:nth-child(4) {
	opacity: 1;
}
#main section.layers figure.section-image.scroll-in.is-in .layer.l-2 {
	transform: translateX(285%);
}
#main section.layers figure.section-image.scroll-in.is-in .layer.l-3 {
	transform: translateX(207.5%);
}
#main section.layers figure.section-image.scroll-in.is-in .arrow {
	opacity: 1;
	transform: translateX(0);
}
#main section.layers figure.section-image.scroll-in.is-in .layers-label .label {
	opacity: 1;
	transform: translateY(0);
}
#main section.layers figure.section-image.scroll-in.is-in .layers-label .lines {
	opacity: 1;
	transform: scaleX(1);
}
#main section.darkroom {
	color: rgb(255, 189, 64);
	background-color: rgb(104, 91, 199);
}
@media (max-width: 767px) {
	#main section.darkroom {
		padding-bottom: 0.6rem;
	}
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image {
		margin-left: -2.0833333333vw;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image {
		margin-left: -2.6666666667vw;
	}
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image {
		margin-top: 0;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image {
		margin-top: 5.3333333333vw;
	}
}
#main section.darkroom figure.section-image .image-wrap {
	position: relative;
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image .image-wrap {
		width: 22.742828125vw;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image .image-wrap {
		width: 45.48565625vw;
	}
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image .image-wrap {
		height: 38.0208333333vw;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image .image-wrap {
		height: 76.0416666667vw;
	}
}
#main section.darkroom figure.section-image .film-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
#main section.darkroom figure.section-image .roller {
	position: absolute;
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image .roller {
		width: 22.742828125vw;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image .roller {
		width: 45.48565625vw;
	}
}
#main section.darkroom figure.section-image .roller.l-1 {
	z-index: 3;
}
#main section.darkroom figure.section-image .roller.l-2 {
	z-index: 1;
}
#main section.darkroom figure.section-image .film {
	z-index: 2;
	position: absolute;
	left: 5.5%;
	top: 0%;
}
#main section.darkroom figure.section-image .film canvas.solution {
	z-index: 1;
	position: absolute;
	display: block;
	background-color: #771b39;
	margin: auto;
	left: 13%;
	top: 26%;
	transform: skewY(-22.5deg);
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image .film canvas.solution {
		width: 15.625vw;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image .film canvas.solution {
		width: 31.25vw;
	}
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image .film canvas.solution {
		height: 22.3958333333vw;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image .film canvas.solution {
		height: 44.7916666667vw;
	}
}
#main section.darkroom figure.section-image .film .base {
	z-index: 0;
	position: relative;
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image .film .base {
		width: 20.937290625vw;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image .film .base {
		width: 41.87458125vw;
	}
}
#main section.darkroom figure.section-image .arrow {
	z-index: 10;
	position: absolute;
	left: -20%;
	top: 7%;
}
@media (min-width: 768px) {
	#main section.darkroom figure.section-image .arrow {
		width: 4.4444vw;
	}
}
@media (max-width: 767px) {
	#main section.darkroom figure.section-image .arrow {
		width: 8.8888vw;
	}
}
#main section.darkroom figure.section-image.scroll-in {
	opacity: 0;
	transition: transform ease-out, opacity linear;
	transition-duration: 0.4s;
}
#main section.darkroom figure.section-image.scroll-in .film-wrap {
	transform: translateY(75%);
	transition: transform 5s ease-out 0.2s;
}
#main section.darkroom figure.section-image.scroll-in .roller {
	opacity: 1;
	transition: opacity 0.5s ease-out 4.7s;
}
#main section.darkroom figure.section-image.scroll-in .film {
	transform: translateY(0);
	transition: transform 5s ease-out 0.2s;
}
#main section.darkroom figure.section-image.scroll-in .arrow {
	opacity: 0;
	transform: translateY(200%);
	transition: transform 5s ease-out 0.2s, opacity 0.4s 0.2s;
}
#main section.darkroom figure.section-image.scroll-in.is-in {
	opacity: 1;
	transform: translateY(0);
}
#main section.darkroom figure.section-image.scroll-in.is-in .roller {
	opacity: 0;
}
#main section.darkroom figure.section-image.scroll-in.is-in .film {
	transform: translateY(-75%);
}
#main section.darkroom figure.section-image.scroll-in.is-in .arrow {
	opacity: 1;
	transform: translateY(0);
}
#main section.development {
	color: rgb(64, 195, 195);
	background-color: rgb(0, 30, 98);
}
#main section.development figure.section-image {
	display: flex;
	align-items: center;
}
@media (min-width: 768px) {
	#main section.development figure.section-image {
		margin-left: -4.1666666667vw;
	}
}
@media (max-width: 767px) {
	#main section.development figure.section-image {
		margin-left: 0;
	}
}
@media (min-width: 768px) {
	#main section.development figure.section-image {
		margin-top: 0;
	}
}
@media (max-width: 767px) {
	#main section.development figure.section-image {
		margin-top: 5.3333333333vw;
	}
}
#main section.development figure.section-image .photos-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 768px) {
	#main section.development figure.section-image .photos-wrap {
		width: 36.4583333333vw;
	}
}
@media (max-width: 767px) {
	#main section.development figure.section-image .photos-wrap {
		width: 93.3333333333vw;
	}
}
#main section.development figure.section-image .photo {
	position: relative;
}
@media (min-width: 768px) {
	#main section.development figure.section-image .photo {
		width: 14.5833333333vw;
	}
}
@media (max-width: 767px) {
	#main section.development figure.section-image .photo {
		width: 37.3333333333vw;
	}
}
#main section.development figure.section-image .arrow {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media (min-width: 768px) {
	#main section.development figure.section-image .arrow {
		margin-left: 1.0416666667vw;
	}
}
@media (max-width: 767px) {
	#main section.development figure.section-image .arrow {
		margin-left: 2.6666666667vw;
	}
}
@media (min-width: 768px) {
	#main section.development figure.section-image .arrow {
		margin-right: 0.78125vw;
	}
}
@media (max-width: 767px) {
	#main section.development figure.section-image .arrow {
		margin-right: 2vw;
	}
}
#main section.development figure.section-image .arrow .label {
	position: absolute;
	margin-left: -0.3em;
}
@media (min-width: 768px) {
	#main section.development figure.section-image .arrow .label {
		font-size: 1.3125vw;
	}
}
@media (max-width: 767px) {
	#main section.development figure.section-image .arrow .label {
		font-size: 3.024vw;
	}
}
body[data-lang=en] #main section.development figure.section-image .arrow .label {
	margin-left: -0.4em;
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.development figure.section-image .arrow .label {
		font-size: 0.9625vw;
	}
}
@media (max-width: 767px) {
	body[data-lang=en] #main section.development figure.section-image .arrow .label {
		font-size: 2.2176vw;
	}
}
#main section.development figure.section-image .arrow .label p {
	text-align: center;
}
body[data-lang=ja] #main section.development figure.section-image .arrow .label p {
	letter-spacing: 0.1em;
}
#main section.development figure.section-image .arrow .base {
	position: relative;
}
@media (min-width: 768px) {
	#main section.development figure.section-image .arrow .base {
		width: 5.20828125vw;
	}
}
@media (max-width: 767px) {
	#main section.development figure.section-image .arrow .base {
		width: 10.4165625vw;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.development figure.section-image .arrow .base {
		width: 5.5555vw;
	}
}
@media (max-width: 767px) {
	body[data-lang=en] #main section.development figure.section-image .arrow .base {
		width: 11.111vw;
	}
}
#main section.development figure.section-image.scroll-in .photo {
	transition: transform 1.3s ease-out, opacity 0.4s linear;
}
#main section.development figure.section-image.scroll-in .photo.p-1 {
	transform: translateX(75%);
}
#main section.development figure.section-image.scroll-in .photo.p-2 {
	opacity: 0;
	transform: translateX(-75%);
}
#main section.development figure.section-image.scroll-in .arrow {
	transition: transform 1.3s ease-out, opacity 0.4s linear;
	transition-delay: 1.1s;
	opacity: 0;
	transform: translateX(0);
}
#main section.development figure.section-image.scroll-in.is-in .photo.p-1 {
	transform: translateX(0);
}
#main section.development figure.section-image.scroll-in.is-in .photo.p-2 {
	opacity: 1;
	transform: translateX(0);
}
#main section.development figure.section-image.scroll-in.is-in .arrow {
	opacity: 1;
	transform: translateX(0);
}
#main section.surprise {
	color: rgb(0, 30, 98);
	background-color: rgb(242, 102, 191);
}
#main section.surprise .section-col.image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
@media (max-width: 767px) {
	#main section.surprise figure.section-image {
		margin-top: 0.6rem;
	}
}
#main section.surprise figure.section-image .photo {
	position: relative;
}
@media (min-width: 768px) {
	#main section.surprise figure.section-image .photo .layer.l-1, #main section.surprise figure.section-image .photo .layer.l-2 {
		width: 20.8333333333vw;
	}
}
@media (max-width: 767px) {
	#main section.surprise figure.section-image .photo .layer.l-1, #main section.surprise figure.section-image .photo .layer.l-2 {
		width: 53.3333333333vw;
	}
}
#main section.surprise figure.section-image .photo .layer.l-1 {
	z-index: 1;
	position: absolute;
}
#main section.surprise figure.section-image .photo .layer.l-2 {
	z-index: 0;
	position: relative;
}
#main section.surprise figure.section-image.scroll-in .photo {
	transition: transform 0.8s cubic-bezier(0.23, 0.57, 0.515, 1), opacity 0.528s linear;
	opacity: 0;
	transform: scale(115%);
}
#main section.surprise figure.section-image.scroll-in .photo .layer.l-1 img {
	opacity: 0;
	filter: blur(1rem);
	transition: opacity 3.6s cubic-bezier(0.49, 0.09, 0.26, 0.94), filter 2.7s ease-out;
	transition-delay: 0.8s;
}
#main section.surprise figure.section-image.scroll-in.is-in .photo {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
#main section.surprise figure.section-image.scroll-in.is-in .photo .layer.l-1 img {
	opacity: 1;
	filter: blur(0);
}
#main section.resistant {
	color: rgb(255, 128, 38);
	background-color: rgb(104, 91, 199);
}
@media (max-width: 767px) and (max-width: 767px) {
	#main section.resistant {
		padding-bottom: 13.3333333333vw;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.resistant {
		max-height: none;
	}
}
@media (min-width: 768px) and (min-width: 768px) {
	body[data-lang=en] #main section.resistant {
		height: auto;
	}
}
#main section.resistant .section-col.text {
	z-index: 2;
	position: absolute;
	align-self: flex-start;
}
@media (min-width: 768px) {
	#main section.resistant .section-col.text {
		width: 36.4583333333vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant .section-col.text {
		padding-top: 2.0833333333vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant .section-col.text {
		padding-top: 0;
	}
}
@media (min-width: 768px) {
	#main section.resistant .section-col.text {
		padding-right: 3rem;
	}
}
@media (min-width: 768px) {
	#main section.resistant .section-col.text {
		left: 13.5416666667vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant .section-col.text {
		position: relative;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.resistant .section-col.text {
		position: relative;
	}
}
#main section.resistant .section-col.image {
	width: 100%;
	height: 100%;
}
@media (min-width: 768px) {
	#main section.resistant .section-col.image {
		margin-top: 0;
	}
}
@media (max-width: 767px) {
	#main section.resistant .section-col.image {
		margin-top: 5.3333333333vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant .section-col.image {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.resistant .section-col.image {
		margin-top: -20.8333333333vw;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.resistant .section-col.image {
		position: relative;
		justify-content: flex-end;
	}
}
#main section.resistant figure.section-image {
	z-index: 1;
	position: absolute;
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image {
		width: 100vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image {
		width: 100vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image {
		height: 56.25vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image {
		height: 106.6666666667vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image {
		position: relative;
	}
}
body[data-lang=en] #main section.resistant figure.section-image {
	position: relative;
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.resistant figure.section-image {
		margin-top: 2.0833333333vw;
	}
}
@media (min-width: 768px) {
	body[data-lang=en] #main section.resistant figure.section-image {
		margin-bottom: -2.0833333333vw;
	}
}
#main section.resistant figure.section-image .layers {
	position: relative;
	width: 100%;
	height: 100%;
}
#main section.resistant figure.section-image .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#main section.resistant figure.section-image .layer.l-1 {
	z-index: 3;
}
#main section.resistant figure.section-image .layer.l-2 {
	z-index: 2;
}
#main section.resistant figure.section-image .layer.l-3 {
	z-index: 1;
}
#main section.resistant figure.section-image .photo {
	position: absolute;
	z-index: 0;
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="1"] {
		width: 22.6386625vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="1"] {
		width: 43.4666666667vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="1"] {
		left: -3%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="1"] {
		left: -12%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="1"] {
		top: 56%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="1"] {
		top: 68.5%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="1"] img {
		transform: rotate(29deg) scale(1.1);
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="2"] {
		width: 19.201196875vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="2"] {
		width: 36.8666666667vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="2"] {
		left: 5.5%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="2"] {
		left: 18%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="2"] {
		top: 38.5%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="2"] {
		top: 65%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="2"] {
		z-index: 3;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="3"] {
		width: 22.603940625vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="3"] {
		width: 43.4vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="3"] {
		left: 18.5%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="3"] {
		left: 39%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="3"] {
		top: 40.5%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="3"] {
		top: 64%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="4"] {
		width: 32.0830125vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="4"] {
		width: 61.6vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="4"] {
		left: 27.5%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="4"] {
		left: -12%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="4"] {
		top: 56%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="4"] {
		top: 30%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="5"] {
		width: 19.37480625vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="5"] {
		width: 37.2vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="5"] {
		left: 48.75%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="5"] {
		left: 31%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="5"] {
		top: 38.5%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="5"] {
		top: 23%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="5"] img {
		transform: scale(1.1);
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="6"] {
		width: 22.603940625vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="6"] {
		width: 43.4vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="6"] {
		left: 45.5%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="6"] {
		left: 57%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="6"] {
		top: 16%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="6"] {
		top: 5%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="7"] {
		width: 31.8052375vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="7"] {
		width: 61.0666666667vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="7"] {
		left: 64%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="7"] {
		left: -19%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="7"] {
		top: 2%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="7"] {
		top: 0%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="8"] {
		width: 28.645546875vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="8"] {
		width: 55vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="8"] {
		left: 74%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="8"] {
		left: 57%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="8"] {
		top: 34%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="8"] {
		top: 33%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="8"] {
		z-index: 2;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="9"] {
		width: 15.34706875vw;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="9"] {
		width: 29.4666666667vw;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="9"] {
		left: 69%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="9"] {
		left: 72%;
	}
}
@media (min-width: 768px) {
	#main section.resistant figure.section-image .photo[data-id="9"] {
		top: 60%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="9"] {
		top: 71%;
	}
}
@media (max-width: 767px) {
	#main section.resistant figure.section-image .photo[data-id="9"] img {
		transform: rotate(-15deg) scale(1.1);
	}
}
#main section.resistant figure.section-image.scroll-in .layer.l-3 .photo:nth-child(1) {
	transition-delay: 0s;
}
#main section.resistant figure.section-image.scroll-in .layer.l-3 .photo:nth-child(2) {
	transition-delay: 0.4s;
}
#main section.resistant figure.section-image.scroll-in .layer.l-2 .photo:nth-child(1) {
	transition-delay: 0.8s;
}
#main section.resistant figure.section-image.scroll-in .layer.l-2 .photo:nth-child(2) {
	transition-delay: 1.2s;
}
#main section.resistant figure.section-image.scroll-in .layer.l-2 .photo:nth-child(3) {
	transition-delay: 1.6s;
}
#main section.resistant figure.section-image.scroll-in .layer.l-2 .photo:nth-child(4) {
	transition-delay: 2s;
}
#main section.resistant figure.section-image.scroll-in .layer.l-1 .photo:nth-child(1) {
	transition-delay: 2.4s;
}
#main section.resistant figure.section-image.scroll-in .layer.l-1 .photo:nth-child(2) {
	transition-delay: 2.8s;
}
#main section.resistant figure.section-image.scroll-in .layer.l-1 .photo:nth-child(3) {
	transition-delay: 3.2s;
}
#main section.resistant figure.section-image.scroll-in .photo {
	transition: transform 1.3s cubic-bezier(0.13, 0.02, 0.37, 0.95), opacity 0.858s linear;
	opacity: 0;
	transform: scale(1.1);
	transform-origin: 50% 50%;
}
#main section.resistant figure.section-image.scroll-in.is-in .photo {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

/* ================================== */
/* language_btn */
/* ================================== */
.language-btns {
	z-index: 999;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}
@media (min-width: 768px) {
	.language-btns {
		padding-top: 20px;
	}
}
@media (max-width: 767px) {
	body[data-lang=ja] .language-btns {
		position: fixed;
	}
}
@media (max-width: 767px) and (max-width: 767px) {
	body[data-lang=ja] .language-btns {
		top: 18.6666666667vw;
	}
}
@media (max-width: 767px) {
	body:not([data-lang=ja]) .language-btns {
		padding-top: 2.6666666667vw;
	}
}
.language-btns .wrap-inner {
	width: 100%;
}
@media (min-width: 768px) {
	.language-btns .wrap-inner {
		position: sticky;
		top: 20px;
	}
}
@media (max-width: 767px) {
	body[data-lang=ja] .language-btns .wrap-inner {
		position: relative;
	}
}
body:not([data-lang=ja]) .language-btns .wrap-inner {
	position: sticky;
}
@media (max-width: 767px) {
	body:not([data-lang=ja]) .language-btns .wrap-inner {
		top: 2.6666666667vw;
	}
}

.language-btns-main {
	position: absolute;
	width: -moz-fit-content;
	width: fit-content;
	top: 0;
	z-index: 100;
	font-size: 12px;
	font-weight: 700;
	pointer-events: auto;
}
@media (min-width: 768px) {
	.language-btns-main {
		right: 50px;
	}
}
@media (max-width: 767px) {
	.language-btns-main {
		left: 2.6666666667vw;
	}
}
.language-btns-main a {
	color: rgb(0, 30, 98);
	display: block;
	padding: 0 1rem 0 1.4rem;
}
@media (max-width: 767px) {
	.language-btns-main a {
		padding: 0 0.8rem 0 1.2rem;
	}
}
.language-btns-main .language-btn {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 4.6em;
	padding-right: 4em;
	background-color: rgb(255, 189, 64);
	position: relative;
	-webkit-text-decoration: auto;
	text-decoration: auto;
}
@media (min-width: 768px) {
	.language-btns-main .language-btn {
		height: 4.6em;
	}
}
@media (max-width: 767px) {
	.language-btns-main .language-btn {
		height: 4em;
	}
}
@media (min-width: 768px) {
	.language-btns-main .language-btn {
		line-height: 4.6em;
	}
}
@media (max-width: 767px) {
	.language-btns-main .language-btn {
		line-height: 4em;
	}
}
.language-btns-main .language-btn::before {
	content: "▼";
	position: absolute;
	top: 0;
	right: 1.2em;
	bottom: 0;
	margin: auto;
	font-size: 0.8em;
}
.language-btns-main .language-area {
	display: flex;
	flex-direction: column;
	height: 0;
	overflow: hidden;
}
.language-btns-main .language-area a {
	display: block;
	font-size: 1.2em;
	background-color: rgb(255, 217, 64);
	transition: background-color 0.3s ease;
	text-align: left;
}
@media (min-width: 768px) {
	.language-btns-main .language-area a {
		height: 4em;
	}
}
@media (max-width: 767px) {
	.language-btns-main .language-area a {
		height: 3.2em;
	}
}
@media (min-width: 768px) {
	.language-btns-main .language-area a {
		line-height: 4em;
	}
}
@media (max-width: 767px) {
	.language-btns-main .language-area a {
		line-height: 3.2em;
	}
}
@media (min-width: 768px) {
	.language-btns-main .language-area a:hover {
		background-color: rgb(255, 189, 64);
		-webkit-text-decoration: auto;
		text-decoration: auto;
	}
}

/* ================================== */
/* modal */
/* ================================== */
.modal {
	z-index: 2000;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.modal button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #222222;
}
.modal button:focus:not(.focus-visible) {
	outline: none;
}
.modal .modal-overlay {
	z-index: 1;
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-color: rgba(34, 34, 34, 0.95);
}
.modal .modal-overlay button.close {
	z-index: 10;
	position: absolute;
}
@media (min-width: 768px) {
	.modal .modal-overlay button.close {
		right: 0;
	}
}
@media (max-width: 767px) {
	.modal .modal-overlay button.close {
		right: 0;
	}
}
@media (min-width: 768px) {
	.modal .modal-overlay button.close {
		top: -4.1666666667vw;
	}
}
@media (max-width: 767px) {
	.modal .modal-overlay button.close {
		top: -10.6666666667vw;
	}
}
@media (min-width: 768px) {
	.modal .modal-overlay button.close {
		width: 4.1666666667vw;
	}
}
@media (max-width: 767px) {
	.modal .modal-overlay button.close {
		width: 10.6666666667vw;
	}
}
@media (min-width: 768px) {
	.modal .modal-overlay button.close {
		height: 4.1666666667vw;
	}
}
@media (max-width: 767px) {
	.modal .modal-overlay button.close {
		height: 10.6666666667vw;
	}
}
.modal .modal-overlay button.close svg {
	fill: #fff;
	stroke: none;
}
@media (min-width: 768px) {
	.modal .modal-overlay button.close svg {
		width: 3.3333333333vw;
	}
}
@media (max-width: 767px) {
	.modal .modal-overlay button.close svg {
		width: 8.5333333333vw;
	}
}
.modal .modal-overlay .modal-window {
	z-index: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@keyframes mmFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes mmFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes mmScaleIn {
	0% {
		transform: scale(0.9);
		opacity: 0;
	}
	20% {
		transform: scale(0.9);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes mmScaleOut {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.9);
	}
}
.modal {
	display: none;
}
.modal.is-open {
	display: block;
}
.modal .modal-overlay, .modal .modal-window {
	will-change: transform;
}
.modal[aria-hidden=false] .modal-overlay {
	animation-name: mmFadeIn;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
.modal[aria-hidden=false] .modal-window {
	animation-name: mmScaleIn;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
.modal[aria-hidden=true] .modal-overlay {
	animation-name: mmFadeOut;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
.modal[aria-hidden=true] .modal-window {
	animation-name: mmScaleOut;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

.modal.video .modal-window .video-wrap {
	overflow: hidden;
}
@media (min-width: 768px) {
	.modal.video .modal-window .video-wrap {
		width: 75vw;
	}
}
@media (max-width: 767px) {
	.modal.video .modal-window .video-wrap {
		width: 100vw;
	}
}
@media (min-width: 768px) {
	.modal.video .modal-window .video-wrap {
		height: 42.1875vw;
	}
}
@media (max-width: 767px) {
	.modal.video .modal-window .video-wrap {
		height: 56.25vw;
	}
}
@media (min-width: 768px) {
	.modal.video .modal-window .video-wrap {
		max-width: calc((100svh - 10.4166666667vw) * 1.7777777778);
		max-height: calc(100svh - 10.4166666667vw);
	}
}