@charset "utf-8";
.mainVisual {
	display: flex;
}
.header {
	width:50%;
	position: relative;
}
.header__cont {
	position: sticky;
	left:0;
	top:0;
}
.header__title {
	height:100vh;
	position: relative;
	min-height:620px;
	max-height:calc(50vw * 1.413333);
}
.header__title:before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background-image:url(../img/common/t_nigashiya_head.svg),url(../img/common/t_nigashiya_foot.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top,center bottom;
	animation: color-gradient 7.5s linear infinite;
}
.header__title--ls {
	height:100%;
	display: flex;
	margin:0 14%;
	flex-direction: column;
	justify-content: center;
	padding:50px 0;
	position:relative;
	z-index:2;
}
.header__title--logo {
	width:100%;
	padding-top:55%;
	margin-bottom:50px;
	background:url(../img/common/logo.svg) no-repeat center bottom / contain;
}
.header__title--startdate {
	width:80%;
	padding-top:34.6%;
	margin:0 auto;
	background:url(../img/common/startdate.svg) no-repeat center top / contain;
}
.visual {
	width:50%;
}
.visual__group {
	position: sticky;
	left:0;
	top:0;
}
.visual__lists {}
.visual__list {
	overflow: hidden;
}
.visual__list img {
	transform:scale(1.2);
	transition:all 0.3s ease;
}
.visual__list.swiper-slide-active img {
	transform:scale(1);
}
.visual__list img {
	display: block;
	width:100%;
	height:auto;
}
.visual__nav {
	height:104px;
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background:#FFF;
	padding: 0 40px;
}
@keyframes circle-right {
    0%   {
        transform: rotate(0deg);
        background: #D7D7D7;
    }
    50%  {
        transform: rotate(180deg);
        background: #D7D7D7;
    }
    50.01% {
        transform: rotate(0deg);
        background: #d84f4f;
    }
    100% {
        transform: rotate(0deg);
        background: #d84f4f;
    }
}

@keyframes circle-left {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}
.visual__pagination {
	display:flex;
	height:24px;
	justify-content: flex-end;
}
.visual__pagination--point {
	width:24px;
	height:24px;
	margin-left:16px;
	position: relative;
	display: block;
}
.visual__pagination--point:before {
	content:'';
	position: absolute;
	left:-63%;
	right:-63%;
	top:-63%;
	bottom:-63%;
	background:url(../img/top/point-mask.svg) no-repeat center center / contain;
	pointer-events: none;
	z-index:100;
}
.visual__pagination--point a {
	display: block;
	height:24px;
	background:#d84f4f;
}
.visual__pagination--point a:before {
	content:'';
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	left:-12px;
	width:24px;
	background:#D7D7D7;
	transform-origin:right center;
	z-index:10;
}
.visual__pagination--point.active a:before {
	animation: circle-left 5.3s linear forwards;
}
.visual__pagination--point a:after {
	content:'';
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	left:12px;
	width:24px;
	background:#D7D7D7;
	transform-origin:left center;
	z-index:10;
}
.visual__pagination--point.active a:after {
	animation: circle-right 5.3s linear forwards;
}
.visual__pagination--dot {
	display: block;
	position: absolute;
	left:1px;
	right:1px;
	top:1px;
	bottom:1px;
	border-radius: 50%;
	background:#FFF;
	z-index:50;
	transition:all 0.3s;
}
.visual__pagination--dot:before {
	content:'';
	position: absolute;
	left:9px;
	top:9px;
	width:4px;
	height:4px;
	background:#000;
	border-radius: 50%;
}
.visual__pagination--point.active .visual__pagination--dot:before {
	transform:scale(1.5);
	background:#d84f4f;
}
.visual__name {
	font-size:20px;
	font-weight: 700;
	letter-spacing:-0.02em;
	position: relative;
	height:24px;
	flex:1;
}
.visual__name li {
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	line-height:1.2;
	transition:all 1s ease;
	opacity:0;
	pointer-events: none;
}
.visual__name li.active {
	opacity:1;
}
.header__nav {
	background:#FFF;
}
.header__logo {
	display: none;
}
.header__navTitle {
	border-top:1px solid #000;
	height:80px;
	background-size:241px 33px;
	background-position:0 center;
	background-image: url(../img/top/nav_title.svg);
	background-repeat: repeat-x;
	animation:scroll-navtitle 3s linear infinite;
}
.header__navLists {
	display: flex;
	flex-wrap: wrap;
	border-bottom:1px solid #000;
	counter-reset: number 0;
}
.header__navLists li {
	width:50%;
	height:56px;
}
.header__navLists li a {
	height:56px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items:center;
	text-decoration: none;
	border-bottom:1px solid #000;
	transform:translateY(1px);
	z-index:1;
}
.header__navLists li a:before {
	counter-increment: number 1;
	content: counter(number, decimal-leading-zero);
	position: absolute;
	right:15px;
	bottom:15px;
	font-size:12px;
	font-family: 'Roboto Condensed', sans-serif;
	line-height:1;
	z-index:5;
	transition: all 0.4s ease;
}
.header__navLists li a:hover:before {
	color:#FFF;
}
.header__navLists li a i {
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	animation: nav-out 0.4s ease forwards;
	display: block;
}
.header__navLists li a:hover i {
	animation: nav-in 0.4s ease forwards;
}
.header__navLists li a i:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:#d84f7c;
	animation: color-gradient 7.5s linear infinite;
}
.header__navLists li a span {
	display: block;
	position: relative;
	z-index:5;
	font-size:32px;
	padding-left:40px;
	transition:color 0.4s ease;
}
.header__navLists li a:hover span {
	color:#FFF;
}
.menuBtn {
	display: none;
}
@media screen and (max-width:768px){
	.mainVisual {
		flex-wrap: wrap;
	}
	.header {
		width:100%;
		height:101.2666vw;
		order:2;
	}
	.header:before,
	.header:after {
		display: none;
	}
	.header__cont {
		position: static;
	}
	.header__title {
		height:101.2666vw;
		position: relative;
		min-height:auto;
		max-height:none;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.header__title--ls {
		height:66.6666vw;
		width:74.4vw;
	}
	.header__title--logo {
		margin-bottom:6.4vw;
	}
	.header__title--startdate {
		margin:0 auto 6.4vw;
	}
	.visual {
		width:100%;
		display: flex;
		background:#FFF;
		position: relative;
	}
	.visual__group {
		position: static;
		display: flex;
		width:87.2vw;
		margin-left:0;
	}
	.visual__lists {
		width:87.2vw;
	}
	.visual__list {
		width:87.2vw;
	}
	.visual__nav {
		padding-top:12.8vw;
		height:100%;
		border-left:none;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		width:12.8vw;
		position:absolute;
		right:0;
		top:0;
		bottom:0;
		padding:19.2vw 0 6.4vw;
	}
	.visual__pagination {
		display:block;
		height:auto;
	}
	.visual__pagination--point {
		width:4.2666vw;
		height:4.2666vw;
		margin-left:0;
		margin-top:3.2vw;
	}
	.visual__pagination--point a {
		height:4.2666vw;
	}
	.visual__pagination--point a:before {
		left:-2.13333vw;
		width:4.26666vw;
	}
	.visual__pagination--point a:after {
		left:2.13333vw;
		width:4.26666vw;
	}
	.visual__pagination--dot:before {
		left:50%;
		top:50%;
		width:1vw;
		height:1vw;
		margin-left:-0.5vw;
		margin-top:-0.5vw;
	}
	.visual__name {
		width:12.8vw;
	}
	.visual__name li {
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		font-size:1.2rem;
		left:0;
		right:0;
		top:0;
		bottom:auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.header__nav {
		position:fixed;
		left:0;
		right:0;
		top:0;
		bottom:0;
		overflow:auto;
		z-index:19999;
		background:rgba(255,255,255,.9);
		-webkit-backdrop-filter:blur(8px);
		backdrop-filter:blur(8px);
		transform:translateX(100%);
		transition:transform 0.4s ease-in-out;
	}
	.header__nav.active {
		transform:translateX(0);
	}
	.header__logo {
		display: block;
		height:49.0666vw;
		background:url(../img/top/visual1.jpg) no-repeat right center / 50% auto;
		padding-right:50vw;
		padding-top:6.4vw;
	}
	.header__logo--logo {
		width:37.3333vw;
		height:20.5333vw;
		margin: 0 auto 6.4vw;
	}
	.header__logo--logo a {
		display: block;
		height:20.5333vw;
		background:url(../img/common/logo.svg) no-repeat center center / contain;
	}
	.header__logo--startdate {
		height:9.8vw;
		background:url(../img/common/startdate.svg) no-repeat center center / contain;
	}
	.header__navTitle {
		height:19.2vw;
		background-size:48.6666vw 6.6666vw;
		animation:scroll-navtitle-s 3s linear infinite;
		background-color:#FFF;
	}
	.header__navLists {
		background-color:#FFF;
	}
	.header__navLists li {
		height:10.6666vw;
	}
	.header__navLists li a {
		height:10.6666vw;
	}
	.header__navLists li a:before {
		right:3.2vw;
		bottom:3vw;
		font-size:1rem;
	}
	.header__navLists li a span {
		font-size:2rem;
		padding-left:6.4vw;
	}
	.menuBtn {
		display: block;
		position: fixed;
		right:0;
		top:0;
		width:12.8vw;
		z-index:20000;
	}
	.menuBtn a {
		display: block;
		padding-top:100%;
		position: relative;
		background:#d84f7c;
		animation: color-gradient 7.5s linear infinite;
		text-decoration: none;
	}
	.menuBtn a:before,
	.menuBtn a:after {
		content:'';
		position: absolute;
		left:3.2vw;
		height:1px;
		width:6.4vw;
		background:#FFF;
		transition: all 0.4s ease-in-out;
		z-index:2;
	}
	.menuBtn a:before {
		top:3.2vw;
	}
	.menuBtn a:after {
		top:5vw;
	}
	.menuBtn a i {
		position: absolute;
		left:0;
		top:0;
		bottom:0;
		right:0;
		opacity:0;
		background:#000;
		transition:all 0.4s ease-in-out;
	}
	.menuBtn a.active i {
		opacity:1;
	}
	.menuBtn a.active:before {
		transform:translateY(0.9vw) rotate(20deg);
	}
	.menuBtn a.active:after {
		transform:translateY(-0.9vw) rotate(-20deg);
	}
	.menuBtn a span {
		position: absolute;
		top:50%;
		left:0;
		right:0;
		height:4.5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		color:#FFF;
		font-size:1rem;
	}
}
@keyframes scroll-abouttext {
	from {
		background-position:0 center;
	}
	to {
		background-position:986px center;
	}
}
@keyframes scroll-abouttext-s {
	from {
		background-position:0 center;
	}
	to {
		background-position:153.9129vw center;
	}
}
.about {}
.about__flowtext {
	height:160px;
	background:#d84f7c url(../img/top/about_flowtext_rev.svg) repeat-x 0 center / 986px 82px;
	animation: color-gradient 7.5s linear infinite,scroll-abouttext 12s linear reverse infinite;
}
.about__flowtext.af-rev {
	background:#d84f7c url(../img/top/about_flowtext.svg) repeat-x 0 center / 986px 82px;
	animation: color-gradient 7.5s linear infinite,scroll-abouttext 12s linear infinite;
}
.about__stickyRoad {
	height:600vh;
	min-height:2400px;
}
.about__stickyDisplay {
	height:calc(100% / 6);
	overflow:hidden;
	position: relative;
	position: sticky;
	top:0;
	left:0;
}
.about__stickyInner {
	left:0;
	top:0;
	width:100%;
	height:200%;
	display: flex;
	flex-direction: column;
	position: relative;
	background:#FFF;
	transition:transform 0.6s cubic-bezier(0.24, 0.65, 0.23, 1.11);
}
.about__stickyInner.r {
	transform:rotate(180deg);
}
.about__stickyInner.r3 {
	transform:rotate(360deg);
}
.about__stickyInner.r4 {
	transform:rotate(540deg);
}
.about__inner {
	width:100%;
	height:50%;
	display: flex;
	position: relative;
}
.about__inner--left {
	width:50%;
	height:100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.about__inner--left:before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	box-shadow: 0 0 160px 0px black inset;
	z-index:24;
	pointer-events: none;
}
.about__inner--movie {
	display: block;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
@keyframes scroll-abouttitle {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 348px;
	}
}
@keyframes scroll-abouttitle-s {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 54.9333vw;
	}
}
@keyframes scroll-storytitle {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 338px;
	}
}
@keyframes scroll-storytitle-s {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 53.8864vw;
	}
}
@keyframes scroll-stafftitle {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 321px;
	}
}
@keyframes scroll-stafftitle-s {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 51.1761vw;
	}
}
@keyframes scroll-casttitle {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 284px;
	}
}
@keyframes scroll-casttitle-s {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 45.44vw;
	}
}
.about__title {
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	width:81px;
	background:url(../img/top/about_title.svg) repeat-y 0 0 / 81px 348px;
	animation:scroll-abouttitle 6s linear infinite;
	mix-blend-mode: difference;
	z-index:25;
}
.story__title {
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	width:81px;
	background:url(../img/top/story_title.svg) repeat-y 0 0 / 81px 338px;
	animation:scroll-storytitle 6s linear infinite;
	mix-blend-mode: difference;
	z-index:25;
}
.staff__title {
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	width:81px;
	background:url(../img/top/staff_title.svg) repeat-y 0 0 / 81px 321px;
	animation:scroll-stafftitle 6s linear infinite;
	mix-blend-mode: difference;
	z-index:25;
}
.cast__title {
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	width:82px;
	background:url(../img/top/cast_title.svg) repeat-y 0 0 / 82px 284px;
	animation:scroll-casttitle 6.5s linear infinite;
	mix-blend-mode: difference;
	z-index:25;
}
.about__playMovie {
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:10;
	mix-blend-mode: difference;
	transition:transform 0.3s ease;
}
.about__playMovie:hover {
	transform: scale(1.2);
}
.about__playMovie:before {
	content:'';
	position: absolute;
	left:50%;
	top:50%;
	width:117px;
	height:117px;
	background:url(../img/common/icon_playcircle.svg) no-repeat center center / contain;
	margin-left:-58px;
	margin-top:-58px;
	animation: rotate 16s linear infinite;
}
.about__playMovie:after {
	content:'';
	position: absolute;
	left:50%;
	top:50%;
	width:56px;
	height:64px;
	background:url(../img/common/icon_playbtn.svg) no-repeat center center / contain;
	margin-top:-32px;
	margin-left:-19px;
}
.about__inner--right {
	width:50%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index:3;
	background:#FFF;
	overflow: hidden;
}
.about__inner--right:before {
	content:"";
	pointer-events: none;
	position: absolute;
	height:100%;
	left:-100%;
	right:0;
	top:50%;
	background:url(../img/top/about_circle.svg) no-repeat center center / contain;
}
.about__catch {
	position: absolute;
	left:50%;
	top:0;
	bottom:0;
	width:80px;
	mix-blend-mode: difference;
	margin-left:-40px;
	z-index:50;
	pointer-events: none;
}
.about__catch1 {
	background: url(../img/top/about_catch1.svg) no-repeat center center / contain;
}
.about__catch--place li {
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity:0;
	transition:opacity 1.2s ease;
}
.about__catch--place li.now{
	opacity:1;
	z-index:10;
}
.about__catch--place li.next {
	opacity:0;
	z-index:1;
}
.about__catch--place li img {
	width:100%;
	height: auto;
}
.about__texts {
	width:100%;
	padding:80px;
}
.about__subCatch {
	font-size:20px;
	line-height:1.8;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom:1em;
	color:#d84f7c;
	animation: color-gradient 7.5s linear infinite;
	font-feature-settings: "palt";
}
.about__maintext {
	font-size:16px;
	letter-spacing: 0;
	font-feature-settings: "palt";
	margin-bottom:1.5em;
}
.about__image {
	transform:rotate(180deg);
}
.about__staff {
	position: absolute;
	left:0;
	top:0;
	display: none;
	background:#FFF;
	z-index:5000;
}
.about__stickyInner.r2 .about__staff {
	display: flex;
}
.about__cast {
	position: absolute;
	left:0;
	bottom:0;
	transform:rotate(180deg);
	display: none;
	background:#FFF;
	z-index:5000;
}
.about__stickyInner.r3 .about__cast {
	display: flex;
}
.about__inner--images {
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	overflow: hidden;
}
.about__inner--images li {
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	z-index:1;
	opacity:0;
	transition:opacity 1.2s ease;
}
.about__inner--images li img {
	width: 100%;
	height:100%;
	object-fit: cover;
}
.about__inner--images li.now{
	opacity:1;
	z-index:10;
}
.about__inner--images li.next {
	opacity:1;
	z-index:5;
}
.about__inner--images li.end {
	z-index:1;
	opacity:0;
	transition-delay: 1.2s;
}
.about__staffs {}
.about__staffs div {
	display: flex;
	padding:15px 0;
	height:50px;
	align-items: flex-end;
	line-height:1;
}
.about__staffs dt {
	font-weight: 700;
	font-size:16px;
	color:#d84f7c;
	animation: color-gradient 7.5s linear infinite;
}
.about__staffs dd {
	font-size: 20px;
	padding-left:1em;
}
@media screen and (max-width:768px){
	.about__flowtext {
		height:25.6vw;
		background:#d84f7c url(../img/top/about_flowtext_rev.svg) repeat-x 0 center / 153.9129vw 12.8vw;
		animation: color-gradient 7.5s linear infinite,scroll-abouttext-s 12s linear reverse infinite;
	}
	.about__flowtext.af-rev {
		background:#d84f7c url(../img/top/about_flowtext.svg) repeat-x 0 center / 153.9129vw 12.8vw;
		animation: color-gradient 7.5s linear infinite,scroll-abouttext-s 12s linear infinite;
	}
	.about__stickyRoad {
		height:auto;
		min-height:0;
	}
	.about__stickyDisplay {
		height:auto;
		position: static;
	}
	.about__stickyInner {
		height:auto;
	}
	.about__stickyInner.r {
		transform:none;
	}
	.about__inner {
		height:auto;
		display: block;
	}
	.about__inner--left {
		width:100%;
		height:auto;
		overflow: hidden;
		display: block;
	}
	.about__inner--movieW {
		width:100%;
		position: relative;
		height:0;
		padding-top:56.25%;
	}
	.about__inner--movie {
		top:0;
		left:0;
		transform:none;
		width:100%;
		height:100%;
	}
	.about__title {
		position: absolute;
		left:0;
		top:0;
		bottom:0;
		width:12.8vw;
		background:url(../img/top/about_title.svg) repeat-y 0 0 / 12.8vw 54.9333vw;
		animation:scroll-abouttitle-s 6s linear infinite;
		mix-blend-mode: difference;
		z-index:25;
	}
	.story__title {
		position: absolute;
		left:0;
		top:0;
		bottom:0;
		width:12.8vw;
		background:url(../img/top/story_title.svg) repeat-y 0 0 / 12.8vw 53.8864vw;
		animation:scroll-storytitle-s 6s linear infinite;
		mix-blend-mode: difference;
		z-index:25;
	}
	.staff__title {
		position: absolute;
		left:0;
		top:0;
		bottom:0;
		width:12.8vw;
		background:url(../img/top/staff_title.svg) repeat-y 0 0 / 12.8vw 51.1761vw;
		animation:scroll-stafftitle-s 6s linear infinite;
		mix-blend-mode: difference;
		z-index:25;
	}
	.cast__title {
		position: absolute;
		left:0;
		top:0;
		bottom:0;
		width:12.8vw;
		background:url(../img/top/cast_title.svg) repeat-y 0 0 / 12.8vw 45.44vw;
		animation:scroll-casttitle-s 6.5s linear infinite;
		mix-blend-mode: difference;
		z-index:25;
	}
	.about__playMovie:before {
		width:15.6vw;
		height:15.6vw;
		margin-left:-7.8vw;
		margin-top:-7.8vw;
	}
	.about__playMovie:after {
		width:7.4666vw;
		height:8.5333vw;
		margin-top:-4.2666vw;
		margin-left:-2.5333vw;
	}
	.about__inner--right {
		width:100%;
		height:auto;
		overflow: hidden;
	}
	.about__inner--right:before {
		height:200%;
		left:12.8vw;
		right:12.8vw;
		top:0;
	}
	.about__catch {
		position: relative;
		left:auto;
		right:auto;
		top:auto;
		bottom:auto;
		margin:-6.4vw 0;
		width:100%;
		height:12.8vw;
	}
	.about__catch1 {
		background: url(../img/top/about_catch1_v.svg) no-repeat center center / contain;
	}
	.about__catch--place li img {
		width:auto;
		height: 12.8vw;
	}
	.about__texts {
		width:100%;
		padding:12.8vw 6.4vw;
	}
	.about__subCatch {
		font-size:1.6rem;
		margin-bottom:1.3rem;
	}
	.about__maintext {
		font-size:1.2rem;
	}
	.about__image {
		transition:all 0.6s cubic-bezier(0.24, 0.65, 0.23, 1.11);
		opacity:0;
		transform:translateX(50px);
	}
	.about__stickyInner.rs .about__image {
		transform:translateX(0);
		opacity:1;
	}
	.about__movie {
		opacity:0;
		transform:translateX(-50px);
		transition:all 0.6s cubic-bezier(0.24, 0.65, 0.23, 1.11);
	}
	.about__stickyInner.rr .about__movie {
		transform:translateX(0);
		opacity:1;
	}
	.about__inner--images {
		position: relative;
		left:0;
		right:auto;
		top:0;
		bottom:auto;
		overflow: hidden;
		height:0;
		padding-top:56.25%;
	}
	.about__staff {
		display: block !important;
		position: static;
		opacity:0;
		transform:translateX(-50px);
		transition:all 0.6s cubic-bezier(0.24, 0.65, 0.23, 1.11);
	}
	.about__stickyInner.rt .about__staff {
		transform:translateX(0);
		opacity:1;
	}
	.about__cast {
		display: block !important;
		position: static;
		opacity:0;
		transform:translateX(50px);
		transition:all 0.6s cubic-bezier(0.24, 0.65, 0.23, 1.11);
	}
	.about__stickyInner.ru .about__cast {
		transform:translateX(0);
		opacity:1;
	}
	.about__staffs {
		padding:12.8vw 6.4vw;
	}
	.about__staffs div {
		height:9.6vw;
		padding:2.4vw 0;
	}
	.about__staffs dt {
		font-size:1.2rem;
	}
	.about__staffs dd {
		font-size:1.4rem;
	}
}
.topics {
	display: flex;
	min-height:408px;
	background:#FFF;
	border-bottom:1px solid #000;
}
.topics__titles {
	width:25%;
	order:99;
	position: relative;
	padding:3.3333% calc(3.3333% + 80px) 3.3333% 3.3333%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
@keyframes scroll-topicstitle {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 386px;
	}
}
@keyframes scroll-topicstitle-s {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 61vw;
	}
}
.topics__title {
	width:81px;
	position: absolute;
	top:0;
	bottom:0;
	right:0;
	background:url(../img/top/topics_title.svg) repeat-y 0 0 / contain;
	animation: scroll-topicstitle 7s linear infinite;
}
.topics__title--text {
	font-size:20px;
	line-height:32px;
	color:rgba(0,0,0,0.4);
	letter-spacing: -0.01em;
}
.topics__title--btn {
	height:48px;
}
.topics__title--btn a {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	background:#000;
	height:48px;
	position:relative;
}
.topics__title--btn a span {
	color:#FFF;
	display: block;
	font-size:20px;
	position:relative;
	z-index:10;
}
.topics__title--btn a i {
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	animation: nav-out 0.4s ease forwards;
	display: block;
}
.topics__title--btn a:hover i {
	animation: nav-in 0.4s ease forwards;
}
.topics__title--btn a i:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:#d84f7c;
	animation: color-gradient 7.5s linear infinite;
}
.topics__lists {
	width:100%;
	min-height:408px;
	display: flex;
}
.topics__lists li {
	width:25%;
	min-height:408px;
}
.topics__lists li>a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height:100%;
	padding:13.3333%;
	text-decoration: none;
	position: relative;
	overflow: hidden;
}
.topics__lists li>a:hover {
	color:#FFF;
}
.topics__lists li>a i {
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	animation: nav-out 0.4s ease forwards;
	display: block;
}
.topics__lists li>a:hover i {
	animation: nav-in 0.4s ease forwards;
}
.topics__lists li>a i:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:#d84f7c;
	animation: color-gradient 7.5s linear infinite;
}
.topics__lists--thumb {
	padding-top:100%;
	position: relative;
	margin-bottom:15px;
	background:url(../img/common/noimage.svg) no-repeat center center / cover;
	position: relative;
	z-index:10;
}
.topics__lists--thumb img {
	display: block;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	object-fit: cover;
}
.topics__lists--title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	z-index:10;
	position: relative;
	transition:all 0.4s ease;
}
.topics__lists li a time {
	text-align: right;
	line-height:2;
	padding-top:10px;
	transform: translateY(8px);
	z-index:10;
	position: relative;
	transition:all 0.3s ease;
}
@media screen and (max-width:768px){
	.topics {
		display: flex;
		min-height:0;
		flex-wrap: wrap;
		background:#FFF;
	}
	.topics__titles {
		width:50%;
		padding:6.4vw 19.2vw 6.4vw 6.4vw;
		min-height:75.7333vw;
	}
	.topics__title {
		width:12.8vw;
		background:url(../img/top/topics_title.svg) repeat-y 0 0 / contain;
		animation: scroll-topicstitle-s 7s linear infinite;
	}
	.topics__title--text {
		font-size:1.2rem;
		line-height:2em;
	}
	.topics__title--btn {
		height:9.6vw;
	}
	.topics__title--btn a {
		height:9.6vw;
		position:relative;
	}
	.topics__title--btn a span {
		font-size:1.6rem;
	}
	.topics__lists {
		width:100%;
		flex-wrap: wrap;
	}
	.topics__lists li {
		width:50%;
		min-height:75.7333vw;
		border-right:1px solid rgba(0,0,0,.16);
		border-bottom:1px solid rgba(0,0,0,.16);
	}
	.topics__lists li:nth-child(odd) {
		border-right:none;
	}
	.topics__lists li:nth-child(1),
	.topics__lists li:nth-child(4) {
		border-bottom:none;
	}
	.topics__lists--thumb {
		margin-bottom:2.2vw;
	}
	.topics__lists--title {
		-webkit-line-clamp:3;
		transition:all 0.4s ease;
		font-size:1.2rem;
	}
}
@keyframes shake {

	0%,
	100% {
		transform: rotate(0);
	}

	20% {
		transform: rotate(10deg);
	}

	40% {
		transform: rotate(-10deg);
	}

	60% {
		transform: rotate(5deg);
	}

	80% {
		transform: rotate(-5deg);
	}
}

.about__commentBtn {
	display: inline-block;
	width:24px;
	height:24px;
	vertical-align: bottom;
	margin-left:7px;
	animation: color-gradient 7.5s linear infinite;
	position: relative;
	transform:translateY(-5px);
}
.about__commentBtn span {
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:url(../img/top/btn_comment.svg) no-repeat center center / contain;
	display: block;
	text-indent:-8784px;
	transform-origin: left bottom;
}
.about__commentBtn:hover span {
	animation: shake 0.5s ease;

}
@media screen and (max-width:768px){
	.about__commentBtn {
		width:5vw;
		height:5vw;
		margin-left:0.5rem;
		transform:translateY(-2px);
	}
}
.commentModalBox {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	overflow: auto;
	z-index:20002;
	background:rgba(255,255,255,.85);
	display: none;
}
.commentModal {
	position:absolute;
	min-width: 1200px;
	width:100%;
	min-height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:50px 0;
}
.commentModalIn {
	padding:40px;
	width:700px;
	background:#FFF;
	border:1px solid #000;
	filter: drop-shadow(10px 10px 0px rgba(0,0,0,1));
}
.commentModalIn h2 {
	position:relative;
	display: inline;
	color:#FFF;
	line-height:20px;
	background: linear-gradient(to bottom, rgba(216,79,124,0) 0px,rgba(216,79,124,0) 4px,rgba(216,79,124,1) 4px,rgba(216,79,124,1) 22px,rgba(216,79,124,0) 22px,rgba(216,79,124,0) 26px);
	animation: color-gradient 7.5s linear infinite;
	padding:0 3px;
	font-feature-settings: "palt";
}
.commentText {
	padding-top:20px;
}
@media screen and (max-width:768px){
	.commentModal {
		min-width: 100%;
		width:100%;
		min-height:100%;
		padding:12.8vw 0;
	}
	.commentModalIn {
		padding:6.4vw;
		width:87.2vw;
		filter: drop-shadow(5px 5px 0px rgba(0,0,0,1));
	}
	.commentModalIn h2 {
		font-size:1.2rem;
		line-height:1.2rem;
		font-weight: bold;
		background: linear-gradient(to bottom, rgba(216,79,124,0) 0px,rgba(216,79,124,0) 2px,rgba(216,79,124,1) 2px,rgba(216,79,124,1) 22px,rgba(216,79,124,0) 22px,rgba(216,79,124,0) 26px);
	}
	.commentText {
		padding-top:4vw;
		font-size:1.2rem;
	}
}