.cases-inner-caption {transition:transform 0.5s ease 0.1s, opacity 0.4s ease}
.cases-inner-menu {transition:transform 0.5s ease}

body.case-caption-hide .cases-inner-caption {transition:transform 0.4s ease}
body.case-caption-hide .cases-inner-menu {transition:transform 0.6s ease}   

body.case-caption-hide .cases-inner-top {/*transform:translateY(-50rem);*/z-index:10}
body.case-caption-hide .cases-inner-caption {transform:translateY(-35rem);}
body.case-caption-hide .cases-inner-menu {transform:translateY(-40rem);}

body.inner-page .logo {transition:transform 0.3s ease}
body.inner-page .menu-button {transition:transform 0.3s ease;}

/*
body.case-caption-hide .logo {transform: translateY(-50rem); !important;transition:transform 0.3s ease}
body.case-caption-hide .social-top {transform: translateY(-50rem) !important;animation:none;}
body.case-caption-hide .menu-button {transform: translateY(-50rem); !important;transition:transform 0.3s ease;}
*/

/*body.case-menu-hide .cases-inner-top {transform:translateY(-54rem);}*/

.cases-inner-top {width:116rem;transition:transform 0.7s ease;z-index:1;margin:260px auto auto auto;}
.cases-inner-caption {font-size:92px;line-height:105px;margin:0 0 3rem -0.7rem;z-index:-10;font-weight:700;}
.cases-inner-caption span {opacity:0;transform:translateY(50px);transition:transform 0.3s linear,opacity 0.3s linear;}
.cases-inner-caption.ready span {opacity:1;transform:translateY(0);display:block;}

.cases-inner-menu {word-spacing:14px;color:#fff;font-size:19px;line-height:38px;z-index:10;width:70%;margin:-20px 0 0 0;}
.cases-inner-menu a {word-spacing:normal;opacity:0.5;display:inline-block;color:inherit;line-height:0.9rem;white-space:nowrap;margin:0 0rem 0 0;}
.cases-inner-menu a.active {}
.cases-inner-menu span {word-spacing:normal;cursor:default;opacity:0.5;display:inline-block;}



.cases-inner-menu-w a {opacity:0;transform:translateY(20px);transition:transform 0.2s linear,opacity 0.2s linear;}
                                                                        
.cases-inner-menu-w a.ready {opacity:1;transform:translateY(0);color:#444}
.cases-inner-menu-w a.ready.active {color:#fff}
.cases-inner-menu-w a.a-0  {transition-delay:.0s;}
.cases-inner-menu-w a.a-1  {transition-delay:.10s;}
.cases-inner-menu-w a.a-2  {transition-delay:.20s;}
.cases-inner-menu-w a.a-3  {transition-delay:.30s;}
.cases-inner-menu-w a.a-4  {transition-delay:.40s;}
.cases-inner-menu-w a.a-5  {transition-delay:.50s;}
.cases-inner-menu-w a.a-6  {transition-delay:.60s;}
.cases-inner-menu-w a.a-7  {transition-delay:.70s;}
.cases-inner-menu-w a.a-8  {transition-delay:.80s;}
.cases-inner-menu-w a.a-9  {transition-delay:.90s;}
.cases-inner-menu-w a.a-10 {transition-delay:1.0s;}

.cases-inner-menu-w a.a-100 {transition-delay:.5s;}
.cases-inner-menu-w a.a-200 {transition-delay:.7s;}



@media only screen and (max-width: 640px) {
	.cases-inner-top {width:375px;margin:0;padding:66px 0 0 20px;left:0px;opacity:0	; transition:transform 0.7s ease,opacity 0.7s ease}
	.cases-inner-caption {font-size:64px;height:64px;}
	body.ready .cases-inner-top {transform:translateY(0rem);opacity:1;}

	

	body.case-caption-hide .cases-inner-top {transform:translateY(-245px);z-index:10}

	

	.cases-inner-menu {font-size:19px;width:100%;overflow-x:auto;white-space:nowrap;}
	.cases-inner-menu a {opacity:0.2;margin:0 2.5rem 0 0;}
	.cases-inner-menu a.active {opacity:1;border-bottom:0.2rem solid rgba(255,255,255,1);}
	
}


@media only screen and (min-width: 641px) {
	.cases-inner-teasers {padding-top:160px;min-height:100vh;width:116rem;margin:auto;display:flex;justify-content:space-between;flex-wrap:wrap;}

	.teaser-item {width:54.5rem;height:64rem;position:relative;margin:0 0 7rem 0;}

	.teaser-item:nth-child(odd) {transition:transform .8s ease-out,opacity 0.8s ease-out;transform:translateY(10rem);opacity:0;}
	.teaser-item:nth-child(even) {transition:transform 1s ease-out,opacity 1s ease-out;transform:translateY(10rem);opacity:0;}

	.teaser-item.visible:nth-child(odd) {transition:transform 0.6s ease-out,opacity .8s ease-out;transform:translateY(0rem);opacity:1;}
	.teaser-item.visible:nth-child(even) {transition:transform 1.3s ease-out,opacity 1s ease-out;transform:translateY(7.4rem);opacity:1;}

	.teaser-item.item-3 {transition:transform 0.8s ease-out,opacity 1s ease-out;}

	.cases-inner-teasers .teaser-item.out-port {transform:translateY(-50rem)}

	.teaser-item .pica {position:absolute;    left: -5px;    top: -5px;    right: -5px;    bottom: -5px;;transition:opacity 0.4s ease-out;background:center center no-repeat;background-size:cover;}
	.teaser-item .pica img {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}

	.teaser-item .teaser-item-w {position:relative;z-index:10;width:54.5rem;height:64rem;transition:transform 0.9s ease-out;display:block;}
	.teaser-item .teaser-item-w:nth-child(odd) {transition:transform 0.7s ease-out,opacity .8s ease-out;}
	.teaser-item .teaser-item-w:nth-child(even) {transition:transform 0.1s ease-out,opacity 1s ease-out;}

	.teaser-item .meta {width:54.5rem;height:64rem;position:relative;z-index:20;padding:140px 11rem 0 70px;}
	.teaser-item .caption {font-weight:400;font-size:42px;margin:0 0 20px 0;line-height:49px;opacity:0;transform:translateY(2rem);transition:transform 0.3s ease-out,opacity 0.3s ease-out;color:#fff;}
	.teaser-item .subcaption {font-size:19px;line-height:27px;opacity:0;transform:translateY(8rem);transition:transform 0.3s ease-out,opacity 0.3s ease-out;color:#fff;}
	.teaser-item a:hover {color:#fff}

	.teaser-item:hover {opacity:1 !important;}
	.teaser-item:hover .caption {transform:translateY(0);opacity:1;}
	.teaser-item:hover .subcaption {transform:translateY(0);opacity:1;}
	.teaser-item:hover .pica {opacity:0.15;}

}




@media only screen and (max-width: 640px) {
	.cases-inner-teasers {width:100%;padding:275px 40px 240px 40px;opacity:0;transform:translateY(470px);transition:transform 0.7s ease 0.3s,opacity 0.5s ease-out,background 0.5s ease-out;}
	body.ready .cases-inner-teasers {transform:translateY(0px);opacity:1;}
	.teaser-item {position:relative;margin:0 0 140px 0;width:295px;height:395px;}
	.teaser-item .teaser-item-w {position:relative;z-index:10;width:295px;height:395px;transition:transform 0.9s ease-out;display:block;}
	.teaser-item .pica {position:absolute;left:0;top:0;width:100%;height:100%;transition:opacity 0.4s ease-out;}
	.teaser-item .pica img {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
	.teaser-item .meta {padding:40px 0 0 0;}
	.teaser-item .caption {font-size:42px;font-weight:600;line-height:56px;width:207px;min-height:168px;opacity:1;transform:translateX(-470px);transition:transform 0.7s ease 0.2s,opacity 0.2s ease-out;}
	.teaser-item.visible .caption {transform:translateX(-20px);}
}




.cases-inner-list-body {position:relative;}
.cases-inner-visuals {position:absolute;left:50%;top:0;width:50%;height:100%;z-index:5;}
.cases-inner-visuals-item {transition:opacity 0.7s ease;opacity:0;position:absolute;left:0%;top:0;width:100%;margin:0 0 0 0;;height:100%;display:flex;align-items:center;justify-content:;padding-top:8rem;}
.cases-inner-visuals-item.active {opacity:1;}


.cases-inner-visuals-item .case-visual {height:47rem;opacity:1;}
.swiper-container-inner {position:relative;z-index:20;}

.cases-inner-visuals-item.active  .clipped-wrapper span.p1 img {transform:translateY(8%); }
.cases-inner-visuals-item.active  .clipped-wrapper span.p2 img {transform:translateY(8%); }
.cases-inner-visuals-item.active  .clipped-wrapper span.p3 img {transform:translateY(8%); }
.cases-inner-visuals-item.active  .clipped-wrapper span.p4 img {transform:translateY(8%); }
.cases-inner-visuals-item.active  .clipped-wrapper span.p5 img {transform:translateY(8%); }


.cases-inner-visuals-item.active .case-visual .shadex-1 {transform:scaleX(0.0)}
.cases-inner-visuals-item.active .case-visual .shadex-2 {transform:scaleX(0.03)}
.cases-inner-visuals-item.active .case-visual .shadex-3 {transform:scaleX(0.06)}
.cases-inner-visuals-item.active .case-visual .shadex-4 {transform:scaleX(0.09)}
.cases-inner-visuals-item.active .case-visual .shadex-5 {transform:scaleX(0.12)}
.cases-inner-visuals-item.active .case-visual .shadex-6 {transform:scaleX(0.15)}



.cases-inner-list-caption {font-size:92px;width:116rem;margin:-70px auto -40px auto;line-height:105px;font-weight:400;padding:4rem 0 0 0;}
.cases-inner-list-body {height:100vh;}


.cases-drum {width:58rem;transform:translateX(-50%);margin:auto;height:100%;position:relative;z-index:20}
.cases-drum-splash {height:calc(50% - 50px);}
.cases-drum .scrollbar-track {display:none !important;}

.swiper-container-inner {height:100%;}

.case-slide-b {width:116rem;margin:auto;display:block;}
.case-slide-b:hover {color:inherit;opacity:1;}
.case-slide {width:116rem;margin:auto;}
.case-slide-caption {line-height:58px;font-size:42px;color:#2d2d2d;margin:2rem 0 .2rem 0;transition:color 0.5s ease;font-weight:400;}
.case-slide-sub-caption {line-height:1.1;font-size:2.7rem;color:#fff;margin:0 0 2.2rem 0;}
.case-slide-sub-caption-2 {line-height:1.1;font-size:19px;color:#fff;}

.case-slide-sub-caption {transform:translateY(10rem);opacity:0;}  
.case-slide-sub-caption-2 {transform:translateY(10rem);opacity:0;}
.case-drum-slide.active .case-slide-sub-caption {transition:transform 0.5s ease,opacity 1s ease; }
.case-drum-slide.active .case-slide-sub-caption-2 {transition:transform 0.6s ease,opacity 1s ease; }

.case-drum-slide {height:10rem;overflow:hidden;}
.case-slide-b {}
.case-drum-slide.active {height:15rem;}



.case-drum-slide.active .case-slide-caption {color:#fff;}
.case-drum-slide.active .case-slide-sub-caption,
.case-drum-slide.active .case-slide-sub-caption-2 {transform:translateY(0);opacity:1;}
.case-drum-slide.active .case-slide-b {padding:0;}


/*

.swiper-container-inner {height:100%;}

.case-slide-b {width:116rem;margin:auto;}
.case-slide-caption {line-height:1.1;font-size:4.2rem;color:#2d2d2d;margin:2rem 0 2.2rem 0;}
.case-slide-sub-caption {line-height:1.1;font-size:2.7rem;color:#fff;margin:0 0 2.2rem 0;}
.case-slide-sub-caption-2 {line-height:1.1;font-size:1.4rem;color:#fff;}

.case-slide-sub-caption {transition:transform 0.5s ease,opacity 1s ease; transform:translateY(10rem);opacity:0;}
.case-slide-sub-caption-2 {transition:transform 0.6s ease,opacity 1s ease; transform:translateY(10rem);opacity:0;}

.swiper-container-inner .swiper-slide-active .case-slide-sub-caption,
.swiper-container-inner .swiper-slide-active .case-slide-sub-caption-2 {transform:translateY(0);opacity:1;}

.swiper-container-inner .swiper-slide-active .case-slide-b {padding:2rem 0 9rem 0;}

.swiper-container-inner .swiper-slide {overflow:hidden;transition-property: transform,-webkit-transform,height;}
.swiper-container-inner .swiper-slide-active .case-slide-caption {color:#fff;font-weight:600;}
.swiper-container-inner .swiper-slide-active {height:26rem !important;;}
*/


@media only screen and (max-width: 640px) { 
	.cases-inner-visuals-item {transition:opacity 0.7s ease;opacity:0;position:absolute;left:0;top:0;width:100%;margin:0 0 0 0;height:100%;display:flex;align-items:center;justify-content:flex-end;padding-top:0;}
	.cases-inner-list-caption {font-size:42px;line-height:56px;width:100%;margin:auto;font-weight:600;padding:40px 20px 0 20px;position:absolute;left:0;top:0;transition:transform 0.5s ease}

	body.swiper-index-1-leave .cases-inner-list-caption {transform:translateY(-200px);;}

	.case-visual-mobile {position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
	.case-visual-mobile img {display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease,opacity 0.6s ease;  opacity:0; transform:scale(1.2,1.2);}
	.cases-inner-visuals-item.active .case-visual-mobile img {transform:scale(1,1);opacity:1;}

	.case-slide-b {width:100%;margin:auto;padding:0 20px 0 20px;opacity:0.2;} 
	.swiper-container-inner .swiper-slide-active .case-slide-b {padding:20px 20px 30px 20px;opacity:1;}
	.swiper-container-inner .swiper-slide {height:40px !important;;}
	.swiper-container-inner .swiper-slide-active {height:145px !important;;}

	.case-slide-caption {font-size:19px;color:#fff;margin:20px 0 17px 0;font-weight:600;}
	.case-slide-sub-caption {font-size:16px;color:#fff;margin:0 0 10px 0;}
	.case-slide-sub-caption-2 {font-size:12px}

	body.cases-inner-list-visible .cases-inner-teasers {background:#de0b1c;}

}