/* 共通 */

.header.header--postproduction {
    mix-blend-mode: difference;
}
.footer--postproduction {
    position: absolute;
    bottom: 0;
    left: 0;
}
.postproduction {
    transition-property: all;
    transition-duration: 1.7s;
    overflow: hidden;
}
.section__txt.on .section__txt__img02 {
    background-position: top 40px right;
    opacity: 1;
}
.postproduction.bgmove {
    background-size: 145%;
}
.postproduction .subttl {
    mix-blend-mode: multiply;
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 0;
    width: 14%;
    margin: 0;
    padding: 0;
}
.postproduction .subttl.blend--light {
    mix-blend-mode: lighten;
}
.slide-navigation {
    opacity: 0;
    transition: all 0.3s ease;
}
.slide-navigation.on {
    opacity: 1;
}
.container__list, .container__list li {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	position: relative;
}
.container__list__txt {
	font-size: 21px;
	line-height: 1.5em;
	color: #fff;
	position: relative;
	padding-left: .8em;
	font-weight: 300;
}
.container__list__txt::before {
	content: "";
	width: 4px;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
}
.pdflink {
	width: 450px;
	text-align: center;
	background-color: #C6000B;
	font-size: 21px;
	padding: 1em 0;
	color: #fff;
	font-weight: 400;
	text-decoration: none;
    font-family: sans-serif;
    letter-spacing: .1em;
}
.pdflink:hover {
	opacity: .7;
}
.slide-navigation {
	position: absolute;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	width: 430px;
	height: 57px;
	bottom: 24%;
	right: -5px;
}
.slide-navigation .slick-list {
	width: 430px;
	height: 57px;
}
.slide-navigation .item {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	width: 138px !important;
	height: 57px !important;
	margin: 0 5px 0 0;
	padding: 0;
}
.item.slick-slide.slick-current.slick-active{}
.item.slick-slide.slick-active img {
	position: absolute;
	width: 104%;
	top: -2%;
	left: -2%;
	transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.slide-navigation .item::before {
	content: "";
	width: 138px;
	height: 57px;
	background-color: #E3E3E3;
	opacity: .7;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.item.slick-slide.slick-active:hover img {
	transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.slide-navigation .item img {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	width: 100%;
}

.slide-navigation .slick-current::after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	opacity: 0.5;
	background: #c50018;
	z-index: 2;
}
.slide-navigation .slick-current::before {
	content: "";
	width: 138px;
	height: 57px;
	background-color: #E3E3E3;
	opacity: .7;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: none;
}

.slide-navigation .slick-track {
  transform: unset !important;
}
.section__txt {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
	transition-delay: -.3s;
}
.slide02 .section__txt,
.slide03 .section__txt {
	opacity: 0;
	transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
	transition-delay: -.3s;
}
.section__txt .section__txt__img {
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(10);
	animation:img-remove .5s ease-in-out;
	position: relative;
}
.section__txt .section__txt__img02 {
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
	transition-delay: .6s;
}
.section__txt__img02.scroll {
	background-position: bottom right;
}
.section__txt.on .section__txt__img {
	opacity: 1;
	transform: scale(1);
	animation:img-move .7s ease-in-out;
	/*animation-delay: -.5s;*/
}
.section__gallery {
	width: 23%;
	position: absolute;
	top: 16%;
	right: 0;
	z-index: 1;
}
.section__gallery img {
	width: 22.6%;
}
.section__gallery::after {
	content: "";
	width: 75%;
	height: 2px;
	background-color: #F8F8F8;
	position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
@keyframes img-move {
	0% {
		transform: scale(10);
		opacity:0;
	}
	100% {
		transform: scale(1);
		opacity:1;
	}
}
@keyframes img-remove {
	0% {
		transform: scale(1);
		opacity:1;
	}
	100% {
		transform: scale(10);
		opacity:0;
	}
}



/* flame -----------------------------------------------------*/
.flame {
	background-image: url("../img/flame/bg01.jpg");
	background-attachment: fixed;
	background-color: #f5f5f5;
	background-position: center center;
	background-size: 200%;
	background-repeat: no-repeat;
}

.flame__txt .flame__txt__img {
	background: url("../img/flame/mask.png") no-repeat center center;
	background-size: cover;
    animation: none;
    transform: scale(10);
    opacity:0;
}
.flame__txt .flame__txt__img02 {
	background: url("../img/flame/flame__txt-w.png") no-repeat;
	background-position: top 200px right;
	background-size: 14% auto;
}
.flame__list__item02 {
	background-image: url("../img/black_op-70.png"),url("../img/flame/bg01.jpg");
	background-position: center,center top;
	background-size: 4px 4px,130% auto;
	background-repeat: repeat,no-repeat;
}
.flame__list__item03 {
	background-image: url("../img/black_op-20.png"),url("../img/flame/bg02.jpg");
	background-position: center,center;
	background-size: 4px 4px,cover;
	background-repeat: repeat,no-repeat;
}
.flame__list__item02 .subttl img {
	opacity: .8;
}
.flame__list__item03 .subttl img {
	opacity: .5;
}
/* ma -----------------------------------------------------*/
.ma {
	background-image: url("../img/ma/bg01.jpg");
	background-attachment: fixed;
	background-color: #f5f5f5;
	background-position: center center;
	background-size: 180%;
	background-repeat: no-repeat;
}
.ma__txt .ma__txt__img {
	background: url("../img/ma/mask.png") no-repeat center center;
	background-size: cover;
    animation: none;
    transform: scale(10);
    opacity:0;
}
.ma__txt .ma__txt__img02 {
	background: url("../img/ma/ma__txt-w.png") no-repeat;
	background-position: top 200px right;
	background-size: 14% auto;
}
.ma__list__item02 {
	background-image: url("../img/black_op-70.png"),url("../img/ma/bg01.jpg");
	background-position: center,center center;
	background-size: 4px 4px,130% auto;
	background-repeat: repeat,no-repeat;
}
.ma__list__item03 {
	background-image: url("../img/black_op-20.png"),url("../img/ma/bg02.jpg");
	background-position: center,center;
	background-size: 4px 4px,cover;
	background-repeat: repeat,no-repeat;
}
.ma__list__item02 .subttl img{
	opacity: .8;
}
.ma__list__item03 .subttl img{
	opacity: .5;
}
/* edit -----------------------------------------------------*/
.edit {
	background-image: url("../img/edit/bg01.jpg");
	background-attachment: fixed;
	background-color: #f5f5f5;
	background-position: center top;
	background-size: 180%;
	background-repeat: no-repeat;
}
.edit__txt .edit__txt__img {
	background: url("../img/edit/mask.png") no-repeat center center;
	background-size: cover;
    animation: none;
    transform: scale(10);
    opacity:0;
}
.edit__txt .edit__txt__img02 {
	background: url("../img/edit/edit__txt-w.png") no-repeat;
	background-position: top 200px right;
	background-size: 14% auto;
}
.edit__list__item02 {
	background-image: url("../img/black_op-70.png"),url("../img/edit/bg01.jpg");
	background-position: center,center center;
	background-size: 4px 4px,130% auto;
	background-repeat: repeat,no-repeat;
}
.edit__list__item03 {
	background-image: url("../img/black_op-70.png"),url("../img/edit/bg02.jpg");
	background-position: center,center;
	background-size: 4px 4px,cover;
	background-repeat: repeat,no-repeat;
}
.edit__list__item02 .subttl img, .edit__list__item03 .subttl img {
	opacity: .8;
}
/* color -----------------------------------------------------*/
.color {
	background-image: url("../img/color/color__bg01.jpg");
	background-attachment: fixed;
	background-color: #f5f5f5;
	background-position: center center;
	background-size: 180%;
	background-repeat: no-repeat;
}
.color__txt .color__txt__img {
	background: url("../img/color/color__bg__w.png") no-repeat center center;
	background-size: cover;
    animation: none;
    transform: scale(10);
    opacity:0;
}
.color__txt .color__txt__img02 {
	background: url("../img/color/color__txt-w.png") no-repeat;
	background-position: top 200px right;
	background-size: 14% auto;
}
.color__list__item02 {
	background-image: url("../img/black_op-70.png"),url("../img/color/color__bg01.jpg");
	background-position: center,center center;
	background-size: 4px 4px,cover;
	background-repeat: repeat,no-repeat;
}
.color__list__item03 {
	background-image: url("../img/black_op-20.png"),url("../img/color/color__bg02.jpg");
	background-position: center,center;
	background-size: 4px 4px,cover;
	background-repeat: repeat,no-repeat;
}
.color__list__item02 .subttl img{
	opacity: .8;
}
.color__list__item03 .subttl img{
	opacity: .5;
}
/* encode/qc -----------------------------------------------------*/
.encode {
	background-image: url("../img/encode/bg01.jpg");
	background-attachment: fixed;
	background-color: #f5f5f5;
	background-position: center center;
	background-size: 180%;
	background-repeat: no-repeat;
}
.encode__txt .encode__txt__img {
	background: url("../img/encode/mask.png") no-repeat center center;
	background-size: cover;
    animation: none;
    transform: scale(10);
    opacity:0;
}
.encode__txt .encode__txt__img02 {
	background: url("../img/encode/encode__txt-w.png") no-repeat;
	background-position: top 200px right;
	background-size: 14% auto;
}
.encode__list__item02 {
	background-image: url("../img/black_op-70.png"),url("../img/encode/bg01.jpg");
	background-position: center,center center;
	background-size: 4px 4px,130% auto;
	background-repeat: repeat,no-repeat;
}
.encode__list__item03 {
	background-image: url("../img/black_op-20.png"),url("../img/encode/bg02.jpg");
	background-position: center,center;
	background-size: 4px 4px,cover;
	background-repeat: repeat,no-repeat;
}
.encode__list__item02 .subttl img{
	opacity: .8;
}
.encode__list__item03 .subttl img{
	opacity: .5;
}
/* cg -----------------------------------------------------*/
.cg {
	background-image: url("../img/cg/bg01.jpg");
	background-attachment: fixed;
	background-color: #f5f5f5;
	background-position: center center;
	background-size: 180%;
	background-repeat: no-repeat;
}
.cg__txt .cg__txt__img {
	background: url("../img/cg/mask.png") no-repeat center center;
	background-size: cover;
    animation: none;
    transform: scale(10);
    opacity:0;
}
.cg__txt .cg__txt__img02 {
	background: url("../img/cg/cg__txt-w.png") no-repeat;
	background-position: top 200px right;
	background-size: 14% auto;
}
.cg__list__item02 {
	background-image: url("../img/black_op-70.png"),url("../img/cg/bg01.jpg");
	background-position: center,center center;
	background-size: 4px 4px,130% auto;
	background-repeat: repeat,no-repeat;
}
.cg__list__item03 {
	background-image: url("../img/black_op-20.png"),url("../img/cg/bg02.jpg");
	background-position: center,center;
	background-size: 4px 4px,cover;
	background-repeat: repeat,no-repeat;
}
.cg__list__item02 .subttl img{
	opacity: .8;
}
.cg__list__item03 .subttl img{
	opacity: .5;
}


/* ----------------------------------------------------------------------------------------------------*/
/* 〜1200px -------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------*/
@media (max-width: 1194px) {
}

/* ----------------------------------------------------------------------------------------------------*/
/* breakpoint SP -------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
    .header.header--postproduction {
        mix-blend-mode: normal;
    }
    .container__verticalTtl.active {
        top: 0;
    }
	.postproductionSp {
		margin-top: 20vw;
		padding-top: 24vw;
		padding-bottom: 44vw;
		position: relative;
        min-height: 100vh;
	}
    .postproductionSp .lineSp {
		top: 92.5vw;
    }
	.sectionSp__img01 {
		width: 84%;
		height: 52vw;
		position: relative;
		z-index: 1;
		overflow: hidden;
		position: relative;
	}
	.sectionSp__img02 {
		width: 59%;
		height: 47vw;
		margin-top: 6em;
		margin-left: 41%;
		overflow: hidden;
		position: relative;
	}
	.sectionSp__img03 {
		width: 37%;
		height: 28vw;
		margin-top: -14.5vw;
		margin-left: 26%;
		overflow: hidden;
		position: relative;
	}
	.jsSp-moveimg {
		width: 110%;
		position: absolute;
		top: 5%;
		left: -5%;
		transition: all 0.8s ease;
		-moz-transition: all 0.8s ease;
		-webkit-transition: all 0.8s ease;
		-o-transition: all 0.8s ease;
	}
	.sectionSp__img03 .jsSp-moveimg {
		transition-delay: 500ms;
	}
	.sectionSp__ttl {
		width: 84%;/*390の84%は327*/
		height: 12vw;
		text-indent: -9999vw;
		position: relative;
		margin-top: 2em;
		margin-bottom: 2.5em;
	}
	.sectionSp__ttl::before {
		content: "";
		width: 30.39%;
		height: 1px;
		background-color: #333;
		position: absolute;
		top: 50%;
		left: 5%;
		transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
	}
	.sectionSp__point {
		width: 17px;
		height: 17px;
		border: 2px solid #333;
		border-radius: 50%;
		background-color: #F8F8F8;
		position: absolute;
		top: 50%;
		left: 2.4%;
		transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
	}
	.sectionSp__point::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #333;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.sectionSp__txt {
		width: 84%;
		padding-left: 10%;
		font-size: 4vw;
		/*text-align: justify;*/
		line-height: 2em;
		font-weight: 300;
		padding-bottom: 3em;
		color: #333;
	}
	.sectionSp__link {
		padding: 3em 0 0;
		position: relative;
		z-index: 1;
	}
	.sectionSp__link a {
		font-size: 4.2vw;
		line-height: 1em;
		text-align: center;
		color: #000;
		border: 1px solid #333;
		width: 78%;
		margin: 0 auto;
		padding: 1em 0;
		font-weight: 300;
		text-decoration: none;
		position: relative;
		background-color: #fff;
		transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
        font-family: sans-serif;
        letter-spacing: .1em;
	}
    .sectionSp__link.sectionSp__link--arrow a {
		background: url("../img/sp/sectionSp__link__arrow.png") no-repeat center right 6% #fff;
		background-size: 9% auto;
    }
    .sectionSp__link.sectionSp__link--arrow a:hover {
		background: url("../img/sp/sectionSp__link__arrow-w.png") no-repeat center right 6% #C6000B;
		background-size: 9% auto;
    }
	.sectionSp__link a:hover {
		color: #fff;
		background-color: #C6000B;
		border: 1px solid #C6000B;
	}
	.lineSp {
		width: 20px; 
		height: 100%;
		position: absolute;
		top: 0;
		left: 1.84%;
		z-index: 0;
	}
	.lineSp::before {
		content: "";
		width: 1px;
		height: 0;
		background-color: #333;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -1px;
		transition: all 2.5s ease;
		-webkit-transition: all 2.5s ease;
		-moz-transition: all 2.5s ease;
	}
	.lineSp.active::before {
		height: 100%;
	}
	.sectionSp__txt.txtend::before, .sectionSp__txt.txtend::after {
		right: -5%; 
	}


    /* flame  --------------------------------------------------------------*/
	.flameSp .sectionSp__ttl {
		background: url("../img/sp/flame/ttl.png") no-repeat center right;
		background-size: auto 85%;
	}
	.flameSp .sectionSp__img02 {
		margin-left: 29%;
		margin-right: 12%;
	}
	.flameSp .sectionSp__img03 {
		margin-left: 63%;
	}
    
	/* ma  --------------------------------------------------------------*/
	.maSp .sectionSp__ttl {
		background: url("../img/sp/ma/ttl.png") no-repeat center right;
		background-size: auto 85%;
	}
	.maSp .sectionSp__img02 {
		margin-left: 29%;
		margin-right: 12%;
	}
	.maSp .sectionSp__img03 {
		margin-left: 63%;
	}
	.maSp .sectionSp__ttl::before {
		width: 60%;
	}
    
	/* edit  ----------------------------------------------------------*/
	.editSp .sectionSp__ttl {
		background: url("../img/sp/edit/ttl.png") no-repeat center right;
		background-size: auto 85%;
	}
	.editSp .sectionSp__ttl::before {
		width: 50%;
	}

    /* color  ----------------------------------------------------------*/
	.colorSp .sectionSp__ttl {
		background: url("../img/sp/color/color__ttl.png") no-repeat center right;
		background-size: auto 85%;
	}
	.colorSp .sectionSp__img02 {
		margin-left: 29%;
		margin-right: 12%;
	}
	.colorSp .sectionSp__img03 {
		margin-left: 63%;
	}
	/* encode/qc  ----------------------------------------------------------*/
	.encodeSp .sectionSp__ttl {
		background: url("../img/sp/encode/ttl.png") no-repeat center right;
		background-size: auto 85%;
	}
	.encodeSp .sectionSp__ttl::before {
		width: 22%;
	}
	/* cg  --------------------------------------------------------------*/
	.cgSp .sectionSp__ttl {
		background: url("../img/sp/cg/ttl.png") no-repeat center right;
		background-size: auto 85%;
	}
	.cgSp .sectionSp__img02 {
		margin-left: 29%;
		margin-right: 12%;
	}
	.cgSp .sectionSp__img03 {
		margin-left: 63%;
	}
	.cgSp .sectionSp__ttl::before {
		width: 63%;
	}

	

	

}