@charset "utf-8";
/* -----------------------------------------------
= common
----------------------------------------------- */
html,body {
	height: 100%;
}
body {
	opacity: 0;
	transition: opacity .8s;
}
body.visible {
	opacity: 1;
}
/* -----------------------------------------------
= header
----------------------------------------------- */
.header {
	color: #fff;
}
.header::before {
	background: rgba(0,0,0,.3);
}
.header .logo a {
	color: #fff;
}
.header.nav_header {
	display: none;
}
.is-nav_opened .header.nav_header {
	display: block;
}
.is-nav_opened .header.nav_header .logo a {
	display: block;
	color: #080808;
}
/* -----------------------------------------------
= gnav
----------------------------------------------- */
@media print, screen and (min-width: 768px) {/* PC */
.gnav .category a {
	color: #fff;
}
.gnav_sub {
	background: rgba(0,0,0,.3);
}
.gnav_sub .inner::-webkit-scrollbar-track {
	background-color: rgba(255,255,255,.2);
}
.gnav_sub .inner::-webkit-scrollbar-thumb {
	background-color: rgba(255,255,255,.4);
}
.gnav .nav_index a {
	color: #fff;
}
.gnav .nav_index a::after {
	background: url(../../img/shared/icon_nav_arrow_white.svg) no-repeat 50% / cover;
}
.gnav .gnav_project li a {
	color: #fff;
}
}/* @media */
/* -----------------------------------------------
= fix_link
----------------------------------------------- */
@media print, screen and (min-width: 768px) {/* PC */
.fix_link a {
	color: #fff;
	border-color: #fff;
	background: rgba(36,36,36,.7);
}
}/* @media */
/* -----------------------------------------------
= nav
----------------------------------------------- */
.nav_btn button span,
.nav_btn button span::before,
.nav_btn button span::after {
	border-top-color: #fff;
}
.is-nav_opened .nav_btn button span,
.is-nav_opened .nav_btn button span::before,
.is-nav_opened .nav_btn button span::after {
	border-top-color: #1c1c1c;
}
/* -----------------------------------------------
= bg_movie
----------------------------------------------- */
.bg_movie {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	transition: opacity .8s;
}
.visible .bg_movie {
	opacity: 1;
}
.bg_movie iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(1920 / 1080 * 100vh);
	height: calc(1080 / 1920 * 100vw);
	min-height: 100%;
	min-width: 100%;
	border: none;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}
/* -----------------------------------------------
= main
----------------------------------------------- */
.main {
	position: relative;
	height: calc(100% - 8rem);
	color: #fff;
}
.main::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -4;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
	mix-blend-mode: multiply;
}
.main h1 {
	position: absolute;
	top: 50%;
	left: 2rem;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
}
.main h1 .category {
	margin-bottom: 2rem;
	font-size: 1.3rem;
	letter-spacing: .12em;
}
.main h1 .title {
	font-size: 1.9rem;
	letter-spacing: .06em;
}
.main p {
	position: absolute;
	bottom: 4rem;
	left: 2rem;
}
.main p .en {
	margin-bottom: 2rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 5.3rem;
	font-weight: 100;
	letter-spacing: .14em;
}
.main p .jp {
	display: block;
	font-size: 1.4rem;
	font-weight: 100;
	letter-spacing: .47em;
	opacity: 0;
	transition: opacity .5s 2.8s;
}
.visible .main p .jp {
	opacity: 1;
}
.main .line {
	display: inline-block;
	position: relative;
}
.main .line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg,#bcb2c5 0,#6cb8c1 45%,#a58ab5 100%);
	transform: scale(0,1);
	transform-origin: center left;
	animation: copySlide 1.5s cubic-bezier(0.86,0,0.07,1) forwards;
	animation-play-state: paused;
}
.main .category.line::after {
	animation-delay: .57s;
}
.main .category.line span {
	transition-delay: 1.42s;
}
.main .title.line::after {
	animation-delay: .84s;
}
.main .title.line span {
	transition-delay: 1.59s;
}
.main .en.line::after {
	animation-delay: 1.01s;
}
.main .en.line span {
	transition-delay: 1.76s;
}
.visible .main .line::after {
	animation-play-state: running;
}
.main .line span {
	opacity: 0;
}
.visible .main .line span {
	opacity: 1;
}
.main .blank {
	position: absolute;
	bottom: 8.2rem;
	left: 17rem;
	width: 15.5rem;
	height: 3.3rem;
	background: linear-gradient(120deg,#bcb2c5 0,#6cb8c1 45%,#a58ab5 100%);
	transform: scale(0,1);
	transform-origin: center left;
	opacity: 0;
	transition: transform .5s 2s;
}
.visible .main .blank {
	transform: scale(1,1);
	opacity: 1;
}
@keyframes copySlide {
	0% {
		transform: scale(0,1);
		transform-origin: center left;
	}
	48% {
		transform: scale(1,1);
		transform-origin: center left;
	}
	60% {
		transform: scale(1,1);
		transform-origin: center right;
	}
	100% {
		transform: scale(0,1);
		transform-origin: center right;
	}
}
@media print, screen and (min-width: 768px) {/* PC */
.main {
	height: 100%;
}
.main .inner {
	position: absolute;
	left: 8.6rem;
	top: 55%;
	width: 51.2rem;
	height: 18.7rem;
}
.main h1 {
	position: static;
	margin-bottom: 4rem;
}
.main h1 .category {
	margin-bottom: 1.5rem;
}
.main h1 .title {
	font-size: 2.3rem;
}
.main p {
	position: static;
}
.main p .en {
	margin-bottom: 1rem;
	font-size: 6.7rem;
}
.main p .jp {
	font-size: 1.3rem;
	float: right;
}
.main .blank {
	bottom: 3.8rem;
	left: 19.7rem;
	width: 24.2rem;
	height: 5rem;
}
}/* @media */
/* -----------------------------------------------
= list
----------------------------------------------- */
.list {
	position: relative;
	margin-bottom: 7rem;
}
.list::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -4;
	width: 100%;
	height: 100%;
	background: url(../../img/special/nanimono_bg03.png) repeat-y 46.5% 0 / auto;
}
.list::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: -14rem;
	z-index: -3;
	width: 100%;
	height: calc(100% + 14rem);
	background: url(../../img/shared/bg01.png) repeat;
	mix-blend-mode: multiply;
}
.list .inner01 {
	position: relative;
	padding: 6rem 2rem;
}
.list .inner01::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	background: rgba(43,43,43,.7);
}
.list .inner02 {
	position: relative;
	height: 816rem;
}
.list .item {
	position: absolute;
	height: 22.2rem;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.list .item.visible {
	opacity: 1;
	transform: translateY(0);
}
.list .item.item01 {
	top: 0;
	left: 0;
}
.list .item.item02 {
	top: calc(22.2rem + .5rem + 22.1rem + .5rem);
	right: 0;
}
.list .item.item03 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 2);
	right: 0;
}
.list .item.item04 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 3);
	left: 0;
}
.list .item.item05 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 4);
	left: 0;
}
.list .item.item06 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 5);
	left: 0;
}
.list .item.item07 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 6);
	left: 0;
}
.list .item.item08 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 7);
	left: 0;
}
.list .item.item09 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 8);
	left: 0;
}
.list .item.item10 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 9);
	left: 0;
}
.list .item.item11 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 10);
	left: 0;
}
.list .item.item12 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 11);
	left: 0;
}
.list .item.item13 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 12);
	left: 0;
}
.list .item.item14 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 13);
	left: 0;
}
.list .item.item15 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 14);
	left: 0;
}
.list .item.item16 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 15);
	left: 0;
}
.list .item.item17 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 16);
	left: 0;
}
.list .item.item18 {
	top: calc((22.2rem + .5rem + 22.1rem + .5rem) * 17);
	left: 0;
}
.list .item a {
	display: block;
	position: relative;
}
.list .item a img + img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity .5s;
}
.list .item a:hover img + img {
	opacity: 1;
}
.list .img {
	position: absolute;
	max-width: 16.5rem;
	height: 10.8rem;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.list .img.visible {
	opacity: 1;
	transform: translateY(0);
}
.list .img img {
	object-fit: cover;
	height: 10.8rem;
}
.list .img.vertical img {
	height: 22.1rem;
}
.list .img.img01 {
	top: calc(22.2rem + .5rem);
	right: 0;
}
.list .img.img02 {
	top: calc(22.2rem + .5rem + 10.8rem + .5rem);
	right: 0;
}
.list .img.img03 {
	top: calc(22.2rem + .5rem);
	left: 0;
}
.list .img.img04 {
	top: calc((22.2rem + .5rem) * 2 + 22.1rem + .5rem);
	left: 0;
}
.list .img.img05 {
	top: calc((22.2rem + .5rem) * 2 + 22.1rem + .5rem + 10.8rem + .5rem);
	left: 0;
}
.list .img.img06 {
	top: calc((22.2rem + .5rem) * 3 + (22.1rem + .5rem) * 2);
	right: 0;
}
.list .img.img07 {
	top: calc((22.2rem + .5rem) * 2 + 22.1rem + .5rem);
	right: 0;
}
.list .img.img08 {
	top: calc((22.2rem + .5rem) * 3 + (22.1rem + .5rem) * 2 + 10.8rem + .5rem);
	right: 0;
}
.list .img.img09 {
	top: calc((22.2rem + .5rem) * 4 + (22.1rem + .5rem) * 3);
	left: 0;
}
.list .img.img10 {
	top: calc((22.2rem + .5rem) * 4 + (22.1rem + .5rem) * 3 + 10.8rem + .5rem);
	left: 0;
}
.list .img.img11 {
	top: calc((22.2rem + .5rem) * 5 + (22.1rem + .5rem) * 4);
	right: 0;
}
.list .img.img12 {
	top: calc((22.2rem + .5rem) * 5 + (22.1rem + .5rem) * 4 + 10.8rem + .5rem);
	right: 0;
}
.list .img.img13 {
	top: calc((22.2rem + .5rem) * 3 + (22.1rem + .5rem) * 2);
	left: 0;
}
.list .img.img14 {
	top: calc((22.2rem + .5rem) * 6 + (22.1rem + .5rem) * 5);
	left: 0;
}
.list .img.img15 {
	top: calc((22.2rem + .5rem) * 6 + (22.1rem + .5rem) * 5 + 10.8rem + .5rem);
	left: 0;
}
.list .img.img16 {
	top: calc((22.2rem + .5rem) * 7 + (22.1rem + .5rem) * 6);
	right: 0;
}
.list .img.img17 {
	top: calc((22.2rem + .5rem) * 4 + (22.1rem + .5rem) * 3);
	right: 0;
}
.list .img.img18 {
	top: calc((22.2rem + .5rem) * 7 + (22.1rem + .5rem) * 6 + 10.8rem + .5rem);
	right: 0;
}
.list .img.img19 {
	top: calc((22.2rem + .5rem) * 8 + (22.1rem + .5rem) * 7);
	left: 0;
}
.list .img.img20 {
	top: calc((22.2rem + .5rem) * 8 + (22.1rem + .5rem) * 7 + 10.8rem + .5rem);
	left: 0;
}
.list .img.img21 {
	top: calc((22.2rem + .5rem) * 9 + (22.1rem + .5rem) * 8);
	right: 0;
}
.list .img.img22 {
	top: calc((22.2rem + .5rem) * 9 + (22.1rem + .5rem) * 8 + 10.8rem + .5rem);
	right: 0;
}
.list .img.img23 {
	top: calc((22.2rem + .5rem) * 5 + (22.1rem + .5rem) * 4);
	left: 0;
}
.list .img.img24 {
	top: calc((22.2rem + .5rem) * 10 + (22.1rem + .5rem) * 9);
	left: 0;
}
.list .img.img25 {
	top: calc((22.2rem + .5rem) * 10 + (22.1rem + .5rem) * 9 + 10.8rem + .5rem);
	left: 0;
}
.list .img.img26 {
	top: calc((22.2rem + .5rem) * 11 + (22.1rem + .5rem) * 10);
	right: 0;
}
.list .img.img27 {
	top: calc((22.2rem + .5rem) * 6 + (22.1rem + .5rem) * 5);
	right: 0;
}
.list .img.img28 {
	top: calc((22.2rem + .5rem) * 11 + (22.1rem + .5rem) * 10 + 10.8rem + .5rem);
	right: 0;
}
.list .img.img29 {
	top: calc((22.2rem + .5rem) * 12 + (22.1rem + .5rem) * 11);
	left: 0;
}
.list .img.img30 {
	top: calc((22.2rem + .5rem) * 12 + (22.1rem + .5rem) * 11 + 10.8rem + .5rem);
	left: 0;
}
.list .img.img31 {
	top: calc((22.2rem + .5rem) * 13 + (22.1rem + .5rem) * 12);
	right: 0;
}
.list .img.img32 {
	top: calc((22.2rem + .5rem) * 13 + (22.1rem + .5rem) * 12 + 10.8rem + .5rem);
	right: 0;
}
.list .img.img33 {
	top: calc((22.2rem + .5rem) * 14 + (22.1rem + .5rem) * 13);
	left: 0;
}
.list .img.img34 {
	top: calc((22.2rem + .5rem) * 14 + (22.1rem + .5rem) * 13 + 10.8rem + .5rem);
	left: 0;
}
.list .img.img35 {
	top: calc((22.2rem + .5rem) * 7 + (22.1rem + .5rem) * 6);
	left: 0;
}
.list .img.img36 {
	top: calc((22.2rem + .5rem) * 8 + (22.1rem + .5rem) * 7);
	right: 0;
}
.list .img.img37 {
	top: calc((22.2rem + .5rem) * 9 + (22.1rem + .5rem) * 8);
	left: 0;
}
.list .img.img38 {
	top: calc((22.2rem + .5rem) * 10 + (22.1rem + .5rem) * 9);
	right: 0;
}
.list .img.img39 {
	top: calc((22.2rem + .5rem) * 11 + (22.1rem + .5rem) * 10);
	left: 0;
}
.list .img.img40 {
	top: calc((22.2rem + .5rem) * 12 + (22.1rem + .5rem) * 11);
	right: 0;
}
.list .img.img41 {
	top: calc((22.2rem + .5rem) * 13 + (22.1rem + .5rem) * 12);
	left: 0;
}
.list .img.img42 {
	top: calc((22.2rem + .5rem) * 14 + (22.1rem + .5rem) * 13);
	right: 0;
}
.list .img.img43 {
	top: calc((22.2rem + .5rem) * 15 + (22.1rem + .5rem) * 14);
	left: 0;
}
.list .img.img44 {
	top: calc((22.2rem + .5rem) * 16 + (22.1rem + .5rem) * 15);
	right: 0;
}
.list .img.img45 {
	top: calc((22.2rem + .5rem) * 17 + (22.1rem + .5rem) * 16);
	left: 0;
}
.list .img.img46 {
	top: calc((22.2rem + .5rem) * 18 + (22.1rem + .5rem) * 17);
	right: 0;
}
.list .img.img47 {
	top: calc((22.2rem + .5rem) * 15 + (22.1rem + .5rem) * 14);
	right: 0;
}
.list .img.img48 {
	top: calc((22.2rem + .5rem) * 15 + (22.1rem + .5rem) * 14 + 10.8rem + .5rem);
	right: 0;
}
.list .img.img49 {
	top: calc((22.2rem + .5rem) * 16 + (22.1rem + .5rem) * 15);
	left: 0;
}
.list .img.img50 {
	top: calc((22.2rem + .5rem) * 16 + (22.1rem + .5rem) * 15 + 10.8rem + .5rem);
	left: 0;
}
.list .img.img51 {
	top: calc((22.2rem + .5rem) * 17 + (22.1rem + .5rem) * 16);
	right: 0;
}
.list .img.img52 {
	top: calc((22.2rem + .5rem) * 17 + (22.1rem + .5rem) * 16 + 10.8rem + .5rem);
	right: 0;
}
.list .img.img53 {
	top: calc((22.2rem + .5rem) * 18 + (22.1rem + .5rem) * 17);
	left: 0;
}
.list .img.img54 {
	top: calc((22.2rem + .5rem) * 18 + (22.1rem + .5rem) * 17 + 10.8rem + .5rem);
	left: 0;
}
@media print, screen and (min-width: 768px) {/* PC */
.list {
	margin-bottom: 17rem;
}
.list::before,
.list::after {
	bottom: -30.6rem;
	height: calc(100% + 30.6rem);
}
.list .inner01 {
	padding: 13.6rem 0 18rem;
}
.list .inner01::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: url(../../img/special/nanimono_bg01.svg) no-repeat 50% 42.7rem / 214.1rem auto;
}
.list .inner02 {
	max-width: 116.1rem;
	height: 551.6rem;
	margin: 0 auto;
}
.list .item {
	width: 57.1rem;
	height: 37.8rem;
}
.list .item.item02 {
	top: calc(18.1rem + 1.7rem);
}
.list .item.item03 {
	top: calc(18.1rem + 1.7rem + 37.8rem + 1.7rem);
}
.list .item.item04 {
	top: calc(37.8rem + 1.7rem + 37.9rem + 1.7rem);
}
.list .item.item05 {
	top: calc((37.8rem + 1.7rem) * 2 + (18.1rem + 1.7rem) * 2);
	left: calc(27.7rem + 1.7rem);
}
.list .item.item06 {
	top: calc((37.8rem + 1.7rem) * 3 + (18.1rem + 1.7rem) * 2);
}
.list .item.item07 {
	top: calc((37.8rem + 1.7rem) * 3 + (18.1rem + 1.7rem) * 3);
	left: auto;
	right: 0;
}
.list .item.item08 {
	top: calc((37.8rem + 1.7rem) * 4 + (18.1rem + 1.7rem) * 3);
	left: auto;
	right: 0;
}
.list .item.item09 {
	top: calc((37.8rem + 1.7rem) * 4 + (37.9rem + 1.7rem) * 2);
	left: 0;
	right: auto;
}
.list .item.item10 {
	top: calc((37.8rem + 1.7rem) * 5 + (37.9rem + 1.7rem) * 2);
	left: calc(27.7rem + 1.7rem);
}
.list .item.item11 {
	top: calc((37.8rem + 1.7rem) * 6 + (37.9rem + 1.7rem) * 2);
	left: 0;
}
.list .item.item12 {
	top: calc((37.8rem + 1.7rem) * 6 + (37.9rem + 1.7rem) * 2 + 18.1rem + 1.7rem);
	left: auto;
	right: 0;
}
.list .item.item13 {
	top: calc((37.8rem + 1.7rem) * 7 + (37.9rem + 1.7rem) * 2 + 18.1rem + 1.7rem);
	left: auto;
	right: 0;
}
.list .item.item14 {
	top: calc((37.8rem + 1.7rem) * 7 + (37.9rem + 1.7rem) * 3);
}
.list .item.item15 {
	top: calc((37.8rem + 1.7rem) * 8 + (37.9rem + 1.7rem) * 3);
	left: calc(27.7rem + 1.7rem);
}
.list .item.item16 {
	top: calc((37.8rem + 1.7rem) * 9 + (37.9rem + 1.7rem) * 3);
}
.list .item.item17 {
	top: calc((37.8rem + 1.7rem) * 9 + (37.9rem + 1.7rem) * 3 + 18.1rem + 1.7rem);
	left: auto;
	right: 0;
}
.list .item.item18 {
	top: calc((37.8rem + 1.7rem) * 10 + (37.9rem + 1.7rem) * 3);
}
.list .img {
	max-width: 27.7rem;
	height: 18.1rem;
}
.list .img img,
.list .img.vertical img {
	height: auto;
}
.list .img.img01 {
	top: 0;
	right: calc(27.7rem + 1.7rem);
}
.list .img.img02 {
	top: 0;
}
.list .img.img03 {
	top: calc(37.8rem + 1.7rem);
}
.list .img.img04 {
	top: calc(37.8rem + 1.7rem);
	left: calc(27.7rem + 1.7rem);
}
.list .img.img05 {
	top: calc(37.8rem + 1.7rem + 18.1rem + 1.7rem);
	left: calc(27.7rem + 1.7rem);
}
.list .img.img06 {
	top: calc((37.8rem + 1.7rem) * 2 + 18.1rem + 1.7rem);
	right: calc(27.7rem + 1.7rem);
}
.list .img.img07 {
	top: calc((37.8rem + 1.7rem) * 2 + 18.1rem + 1.7rem);
}
.list .img.img08 {
	top: calc((37.8rem + 1.7rem) * 2 + 37.9rem + 1.7rem);
	right: auto;
	left: 0;
}
.list .img.img09 {
	top: calc((37.8rem + 1.7rem) * 2 + 37.9rem + 1.7rem + 18.1rem + 1.7rem);
}
.list .img.img10 {
	top: calc((37.8rem + 1.7rem) * 2 + 37.9rem + 1.7rem + 18.1rem + 1.7rem);
	left: auto;
	right: 0;
}
.list .img.img11 {
	top: calc((37.8rem + 1.7rem) * 3 + (18.1rem + 1.7rem) * 2);
	right: calc(27.7rem + 1.7rem);
}
.list .img.img12 {
	top: calc((37.8rem + 1.7rem) * 3 + (18.1rem + 1.7rem) * 2);
}
.list .img.img13 {
	top: calc((37.8rem + 1.7rem) * 3 + (37.9rem + 1.7rem) * 2);
}
.list .img.img14 {
	top: calc((37.8rem + 1.7rem) * 3 + (37.9rem + 1.7rem) * 2);
	left: calc(27.7rem + 1.7rem);
}
.list .img.img15 {
	top: calc((37.8rem + 1.7rem) * 3 + (37.9rem + 1.7rem) * 2 + 18.1rem + 1.7rem);
	left: calc(27.7rem + 1.7rem);
}
.list .img.img16 {
	top: calc((37.8rem + 1.7rem) * 5 + (18.1rem + 1.7rem) * 3);
	right: calc(27.7rem + 1.7rem);
}
.list .img.img17 {
	top: calc((37.8rem + 1.7rem) * 5 + (18.1rem + 1.7rem) * 3);
}
.list .img.img18 {
	top: calc((37.8rem + 1.7rem) * 5 + (18.1rem + 1.7rem) * 4);
	left: 0;
	right: auto;
}
.list .img.img19 {
	top: calc((37.8rem + 1.7rem) * 5 + (18.1rem + 1.7rem) * 5);
}
.list .img.img20 {
	top: calc((37.8rem + 1.7rem) * 5 + (18.1rem + 1.7rem) * 5);
	left: auto;
	right: 0;
}
.list .img.img21 {
	top: calc((37.8rem + 1.7rem) * 6 + (18.1rem + 1.7rem) * 4);
	right: calc(27.7rem + 1.7rem);
}
.list .img.img22 {
	top: calc((37.8rem + 1.7rem) * 6 + (18.1rem + 1.7rem) * 4);
}
.list .img.img23 {
	top: calc((37.8rem + 1.7rem) * 7 + (37.9rem + 1.7rem) * 2);
}
.list .img.img24 {
	top: calc((37.8rem + 1.7rem) * 7 + (37.9rem + 1.7rem) * 2);
	left: calc(27.7rem + 1.7rem);
}
.list .img.img25 {
	top: calc((37.8rem + 1.7rem) * 7 + (37.9rem + 1.7rem) * 2 + 18.1rem + 1.7rem);
	left: calc(27.7rem + 1.7rem);
}
.list .img.img26 {
	top: calc((37.8rem + 1.7rem) * 8 + (18.1rem + 1.7rem) * 5);
	right: calc(27.7rem + 1.7rem);
}
.list .img.img27 {
	top: calc((37.8rem + 1.7rem) * 8 + (18.1rem + 1.7rem) * 5);
}
.list .img.img28 {
	top: calc((37.8rem + 1.7rem) * 8 + (37.9rem + 1.7rem) * 3);
	left: 0;
	right: auto;
}
.list .img.img29 {
	top: calc((37.8rem + 1.7rem) * 8 + (37.9rem + 1.7rem) * 3 + 18.1rem + 1.7rem);
}
.list .img.img30 {
	top: calc((37.8rem + 1.7rem) * 8 + (37.9rem + 1.7rem) * 3 + 18.1rem + 1.7rem);
	left: auto;
	right: 0;
}
.list .img.img31 {
	top: calc((37.8rem + 1.7rem) * 9 + (18.1rem + 1.7rem) * 6);
	right: calc(27.7rem + 1.7rem);
}
.list .img.img32 {
	top: calc((37.8rem + 1.7rem) * 9 + (18.1rem + 1.7rem) * 6);
}
.list .img.img33 {
	top: calc((37.8rem + 1.7rem) * 10 + (18.1rem + 1.7rem) * 7);
	left: auto;
	right: calc(27.7rem + 1.7rem);
}
.list .img.img34 {
	top: calc((37.8rem + 1.7rem) * 10 + (18.1rem + 1.7rem) * 7);
	left: auto;
	right: 0;
}

}/* @media */
/* -----------------------------------------------
= modal
----------------------------------------------- */
.modal-backdrop {
	background: linear-gradient(135deg, #d8b0c7,#6cb8c1 40%, #a58ab5 80%);
	opacity: .86 !important;
}
.modal-backdrop::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 24.4rem;
	height: 39.6rem;
	background: #262626;
	opacity: .4;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	mix-blend-mode: overlay;
}
.modal-backdrop::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 18.4rem;
	height: 32.6rem;
	background: #262626;
	opacity: .25;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	mix-blend-mode: overlay;
}
.modal_btn_close {
	top: 2rem;
	right: 3rem;
	z-index: 2;
}
.modal .contents {
	position: relative;
	z-index: 1;
	padding: 0 3rem;
}
.modal .thm {
	padding: 6rem 0 3rem;
}
.modal .intro {
	padding: 0 0 4rem;
	color: #f4f4e9;
}
.modal .intro .name {
	margin-bottom: .5rem;
	font-size: 1.8rem;
	letter-spacing: .06em;
}
.modal .intro .dev {
	margin-bottom: 2rem;
	font-size: 1.2rem;
	line-height: 2rem;
}
.modal .intro .text {
	font-size: 1.3rem;
	line-height: 2.4rem;
}
.modal .intro .note {
	margin-top: 1rem;
	font-size: 1.1rem;
	line-height: 1.6rem;
}
.modal .column {
	padding: 0 0 4rem;
	color: #fff;
}
.modal .column .subtitle {
	margin-bottom: 2rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: .06em;
	text-align: center;
}
.modal .column .logo {
	margin-bottom: 2rem;
	text-align: center;
}
.modal .column .logo img {
	max-width: 24.9rem;
}
.modal .column .question {
	position: relative;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 3rem;
	text-align: center;
	letter-spacing: .06em;
}
.modal .column .question::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 7rem;
	height: .1rem;
	margin-left: -3.5rem;
	background: #fff;
}
.modal .column .text {
	font-size: 1.4rem;
	line-height: 2.8rem;
	letter-spacing: .04em;
}
.modal .page_nav {
	display: flex;
	justify-content: center;
	padding: 0 0 6rem;
}
.modal .page_nav button {
	position: relative;
	margin: 0 1rem;
	padding: 0 1rem;
	color: #fff;
	font-size: 1.4rem;
	line-height: 2.8rem;
}
.modal .page_nav button.prev::before {
	content: '';
	position: absolute;
	top: calc(50% - .3rem);
	left: 0;
	width: .6rem;
	height: .6rem;
	border-top: .1rem solid #fff;
	border-left: .1rem solid #fff;
	transform: rotate(-45deg);
}
.modal .page_nav button.next::after {
	content: '';
	position: absolute;
	top: calc(50% - .3rem);
	right: 0;
	width: .6rem;
	height: .6rem;
	border-top: .1rem solid #fff;
	border-right: .1rem solid #fff;
	transform: rotate(45deg);
}
@media print, screen and (min-width: 768px) {/* PC */
.modal_btn_close {
	top: 4rem;
	right: 4rem;
}
.modal .contents {
	display: flex;
	max-width: 116rem;
	margin: 0 auto;
	padding: 12rem 6rem 0;
}
.modal .thm {
	width: calc(531 / 1160 * 100%);
	margin-right: calc(110 / 1160 * 100%);
	padding: 0;
}
.modal .block {
	flex: 1;
}
.modal .intro {
	padding: 0 0 9rem;
	color: #f4f4e9;
}
.modal .intro .name {
	margin-bottom: .8rem;
	font-size: 2rem;
}
.modal .intro .dev {
	margin-bottom: 2rem;
	font-size: 1.3rem;
	line-height: 2.6rem;
}
.modal .intro .text {
	font-size: 1.5rem;
	line-height: 3rem;
}
.modal .column {
	padding: 0 0 9rem;
}
.modal .column::after {
	bottom: -10.9rem;
	right: -9.6rem;
	width: 35.5rem;
	height: 62.2rem;
}
.modal .column .subtitle {
	margin-bottom: 4.2rem;
	font-size: 1.8rem;
}
.modal .column .logo {
	margin: 0 0 4rem;
}
.modal .column .logo img {
	max-width: 32.5rem;
}
.modal .column .question {
	margin-bottom: 3rem;
	font-size: 2.4rem;
}
.modal .column .text {
	font-size: 1.7rem;
	line-height: 3.2rem;
}
}/* @media */
/* -----------------------------------------------
= movie
----------------------------------------------- */
.movie {
	position: relative;
	padding: 0 2rem 8.5rem;
	color: #fff;
	overflow: hidden;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.movie.visible {
	opacity: 1;
	transform: translateY(0);
}
.movie::before {
	content: '';
	position: absolute;
	top: 7rem;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
}
.movie::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 18.4rem;
	height: 32.6rem;
	background: rgba(0,0,0,.85);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	mix-blend-mode: multiply;
}
.movie h2 {
	margin-bottom: 2rem;
	padding-top: 11.5rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	text-align: center;
	letter-spacing: .16em;
}
.movie .embed {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.movie .embed iframe {
	width: 100%;
	height: 100%;
}
@media print, screen and (min-width: 768px) {/* PC */
.movie {
	padding: 0;
}
.movie::before {
	top: 13.6rem;
}
.movie::after {
	left: auto;
	right: calc(50% + 8rem);
	width: 64.3rem;
	height: 118.6rem;
}
.movie .inner {
	position: relative;
	padding: 0 4rem 16rem;
}
.movie .inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: calc(50% - 72.3rem);
	height: 100%;
	background: rgba(0,0,0,.85);
	mix-blend-mode: multiply;
}
.movie h2 {
	margin-bottom: 3rem;
	padding-top: 25rem;
	font-size: 1.4rem;
}
.movie .embed {
	max-width: 96.4rem;
	margin: 0 auto;
}
}/* @media */
/* -----------------------------------------------
= cursor
----------------------------------------------- */
.cursor {
	position: fixed;
	width: 9rem;
	height: 9rem;
	margin: -4.5rem 0 0 -4.5rem;
	background: #ed0000;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
}
.cursor.active {
	opacity: 1;
}
.cursor::after {
	content: 'DISCOVER';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 300;
	line-height: 9rem;
	text-align: center;
	letter-spacing: .1em;
}
@media print, screen and (max-width: 767px) {/* SP */
.cursor {
	display: none;
}
}/* @media */
/* -----------------------------------------------
= print
----------------------------------------------- */
@media print {
.list .item,
.list .img,
.movie {
	opacity: 1;
	transform: translateY(0);
}
}/* @media */