@charset "utf-8";

/* CSS Document */
*:focus {
	outline: none;
}
#modal_lineup img{
	width: 100%;
}
/*------------------------
	PC
------------------------*/
@media screen and (min-width:1080px){
	.mfp-wrap.modal_lineup .mfp-container{
		padding: 0!important;
	}
	.mfp-wrap.modal_lineup .mfp-container:before{
		height: auto!important;
	}
	#modal_lineup .slider {
        width: 100%!important;
        margin: 0 auto!important;
    }
    #modal_lineup .slick-list {
        position: relative;
        width: 100%!important;
		height: 100%!important;
    }
	#modal_lineup .slick-list .slick-slider{
		height: 100vh;
	}
    #modal_lineup .slick-prev {
        position: absolute;
        left: 7%;
        top: 47%;
        margin: auto auto;
        text-indent: 200%;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        background-size: contain;
        width: 4vw;
        height: 5.2vw;
        border: none;
        background: rgba(255, 0, 0, 0);
		z-index: 1;
    }
    #modal_lineup .slick-next {
        position: absolute;
        right: 7%;
        top: 47%;
        margin: auto auto;
        text-indent: 200%;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        background-size: contain;
		width: 4vw;
        height: 5.2vw;
        border: none;
		background: rgba(255, 0, 0, 0);
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
    }
	#modal_lineup .slick-prev:before, #modal_lineup .slick-next:before {
		content: "";
		display: block;
		position: absolute;
		top: 1.64vw;
		width: 2.5vw;
		height: 0.4vw;
		background: #fed700;
		transform: rotate(-45deg);
	}
	#modal_lineup .slick-prev:after, #modal_lineup .slick-next:after {
		content: "";
		display: block;
		position: absolute;
		bottom: 1.64vw;
		width: 2.5vw;
		height: 0.4vw;
		background: #fed700;
		transform: rotate(45deg);
	}
	#modal_lineup .slider li.slick-slide:before{
		content: "";
    	display: block;
    	width: 100%;
    	height: 100%;
    	position: absolute;
	}
	#modal_lineup .slider li.slick-slide:nth-child(1):before{
		background: url(../images/lineup/ff_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(2):before{
		background: url(../images/lineup/kd_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(3):before{
		background: url(../images/lineup/cc_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(4):before{
		background: url(../images/lineup/kr_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(5):before{
		background: url(../images/lineup/t2_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(6):before{
		background: url(../images/lineup/pg_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(7):before{
		background: url(../images/lineup/bc_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li .inner{
		width: 66%;
		height: 101vh;
		margin: 0 17%;
		position: relative;
		display: table;
	}
	#modal_lineup .slider li .inner .inner_box{
		display: table-cell;
    	vertical-align: middle;
	}
	#modal_lineup .slider li .inner .inner_box h6{
		text-align: center;
    	font-size: 2.6vw;
    	font-family: 'Noto Sans Japanese';
    	font-weight: 900;
    	line-height: 1.2em;
    	letter-spacing: 0.05em;
    	margin-bottom: 3vw;
		width: 100%;
    	color: white;
	}
	#modal_lineup .slider li .inner .inner_box .left{
		width: 40%;
		float: left;
		position: relative;
	}
	#modal_lineup .slider li .inner .inner_box .left .csnew{
		position: absolute;
		width: 28%;
		top: -3vw;
    	left: -2vw;
	}
	#modal_lineup .slider li .inner .inner_box .right{
		width: 56%;
		float: left;
		margin-left: 4%;
		position: relative;
	}
	#modal_lineup .slider li .inner .inner_box .right .logo{
		width: 73%;
		margin-top: -3vw;
		margin-left: 8%;
	}
	#modal_lineup .slider li:nth-child(3) .inner .inner_box .right .logo{
		margin-bottom: -2vw;
	}
	#modal_lineup .slider li:nth-child(5) .inner .inner_box .right .logo{
		margin-top: -2.5vw;
		margin-bottom: 0.5vw;
	}
	#modal_lineup .slider li:nth-child(6) .inner .inner_box .right .logo{
		margin-bottom: -1vw;
	}
	#modal_lineup .slider li .inner .inner_box .right h7{
		font-size: 1.8vw;
    	font-family: 'Noto Sans Japanese';
    	font-weight: 900;
    	line-height: 1.4em;
    	letter-spacing: 0.05em;
    	color: #ffff00;
	}
	#modal_lineup .slider li .inner .inner_box .right .spec{
		margin-top: 1.5vw;
		display: inline-block;
		width: 100%;
	}
	#modal_lineup .slider li .inner .inner_box .right .spec dl{
		font-family: 'Noto Sans Japanese';
		float: left;
		margin-right: 3vw;
	}
	#modal_lineup .slider li .inner .inner_box .right .spec dl dt{
		float: left;
		font-weight: 900;
    	font-size: 0.9vw;
		color: #113887;
    	width: 5vw;
    	text-align: center;
    	padding: 0.4vw;
		margin-right: 0.8vw;
    	display: inline-block;
		background-color: #fed700;
	}
	#modal_lineup .slider li .inner .inner_box .right .spec dl dd{
		float: left;
		color: white;
		font-weight: 500;
		font-size: 0.9vw;
		margin-top: 0.45vw;
	}
	#modal_lineup .slider li .inner .inner_box .right .txt{
		font-family: 'Noto Sans Japanese';
    	font-weight: 500;
    	font-size: 0.8vw;
    	line-height: 1.8em;
    	margin: 1.5vw auto;
    	clear: both;
    	color: white;
	}
	#modal_lineup .slider li .inner .inner_box .right .images{
		width: 100%;
	}
	#modal_lineup .slider li .inner .inner_box .right .images li{
		width: 48%;
		float: left;
	}
	#modal_lineup .slider li .inner .inner_box .right .images li+li{
		margin-left: 4%;
	}
	#modal_lineup .slider li .inner .inner_box .right .images li img{
		box-sizing: border-box;
    	border: solid 1px white;
	}
	#modal_lineup .slider li .inner .inner_box .right .copy{
		color: #bfbfbf;
    	font-size: 0.5vw;
    	width: 100%;
    	text-align: right;
    	display: inline-block;
    	margin-top: 1vw;
		line-height: 1.5em;
	}
}
/*------------------------
	SP・TB
------------------------*/
@media screen and (max-width:1079px){
	.mfp-bg.modal_lineup{
		opacity: 1!important;
	}
	#modal_lineup .slider img{
		width: 100%;
		height: auto;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	#modal_lineup .slider {
        width: 100%!important;
        margin: 0 auto!important;
    }
    #modal_lineup .slick-list {
        position: relative;
        width: 100%!important;
		height: 100%!important;
    }
	#modal_lineup .slick-list .slick-slider{
		height: 100vh;
	}
    #modal_lineup .slick-prev {
        position: absolute;
        left: 7%;
        top: 72vw;
        color: rgba(255, 255, 255, 0);
        margin: auto auto;
        text-indent: 200%;
        white-space: nowrap;
        cursor: pointer;
        background-size: contain;
        width: 8vw;
        height: 10.2vw;
        border: none;
        background: rgba(255, 0, 0, 0);
        z-index: 1;
    }
    #modal_lineup .slick-next {
        position: absolute;
        right: 7%;
        top: 72vw;
		color: rgba(255, 255, 255, 0);
        margin: auto auto;
        text-indent: 200%;
        white-space: nowrap;
        cursor: pointer;
        background-size: contain;
		width: 8vw;
        height: 10.2vw;
        border: none;
		background: rgba(255, 0, 0, 0);
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
    }
	#modal_lineup .slick-prev:before, #modal_lineup .slick-next:before {
		content: "";
		display: block;
		position: absolute;
		top: 2.4vw;
		width: 7vw;
		height: 1vw;
		background: #fed700;
		transform: rotate(-45deg);
	}
	#modal_lineup .slick-prev:after, #modal_lineup .slick-next:after {
		content: "";
		display: block;
		position: absolute;
		bottom: 2.4vw;
		width: 7vw;
		height: 1vw;
		background: #fed700;
		transform: rotate(45deg);
	}
	#modal_lineup .slider li.slick-slide:before{
		content: "";
    	display: block;
    	width: 100%;
    	height: 110%;
    	position: absolute;
	}
	#modal_lineup .slider li.slick-slide:nth-child(1):before{
		background: url(../images/lineup/ff_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(2):before{
		background: url(../images/lineup/kd_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(3):before{
		background: url(../images/lineup/cc_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(4):before{
		background: url(../images/lineup/kr_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(5):before{
		background: url(../images/lineup/t2_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(6):before{
		background: url(../images/lineup/pg_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li.slick-slide:nth-child(7):before{
		background: url(../images/lineup/bc_bg.jpg) top center no-repeat;
	}
	#modal_lineup .slider li .inner{
		margin: 0 6vw;
		position: relative;
	}
	#modal_lineup .slider li .inner .inner_box h6{
    	margin: 16vw auto 5vw;
		width: 100%;
		display: table;
	}
	#modal_lineup .slider li:nth-child(2) .inner .inner_box h6{
    	margin-left: 3vw;
	}
	#modal_lineup .slider li:nth-child(4) .inner .inner_box h6{
    	margin-left: 5vw;
	}
	#modal_lineup .slider li:nth-child(5) .inner .inner_box h6{
    	margin-left: 3vw;
	}
	#modal_lineup .slider li:nth-child(6) .inner .inner_box h6{
    	margin-left: 7vw;
	}
	#modal_lineup .slider li:nth-child(7) .inner .inner_box h6{
    	margin-left: 3vw;
	}
	#modal_lineup .slider li .inner .inner_box h6 .logo{
		width: 40%;
		display:  table-cell;
	}
	#modal_lineup .slider li .inner .inner_box h6 p{
    	font-size: 4.5vw;
    	font-family: 'Noto Sans Japanese';
    	font-weight: 900;
    	line-height: 1.2em;
    	letter-spacing: 0.05em;
    	color: white;
    	display: table-cell;
    	vertical-align: middle;
		padding-left: 1vw;
	}
	#modal_lineup .slider li .inner .inner_box .visual{
		width: 60%;
		margin: 0 auto;
	}
	#modal_lineup .slider li .inner .inner_box .left .csnew{
		position: absolute;
    	width: 20%;
    	top: 20vw;
    	left: 11vw;
		z-index: 1;
	}
	#modal_lineup .slider li .inner .inner_box .right h7{
		font-size: 4.5vw;
    	font-family: 'Noto Sans Japanese';
    	font-weight: 900;
    	line-height: 1.4em;
    	letter-spacing: 0.05em;
    	color: #ffff00;
    	margin-top: 5vw;
    	text-align: center;
    	display: inline-block;
    	width: 100%;
	}
	#modal_lineup .slider li .inner .inner_box .right .spec{
		margin-top: 4.5vw;
		display: inline-block;
	}
	#modal_lineup .slider li .inner .inner_box .right .spec dl{
		font-family: 'Noto Sans Japanese';
		width: 100%;
    	display: inline-block;
    	margin-bottom: 1.5vw;
	}
	#modal_lineup .slider li .inner .inner_box .right .spec dl dt{
		float: left;
    	font-weight: 900;
    	font-size: 3.3vw;
    	color: #113887;
    	width: 20vw;
    	text-align: center;
    	padding: 0.8vw;
    	margin-right: 2vw;
    	background-color: #fed700;
	}
	#modal_lineup .slider li .inner .inner_box .right .spec dl dd{
		float: left;
		color: white;
		font-weight: 500;
		margin-top: 1vw;
	}
	#modal_lineup .slider li .inner .inner_box .right .txt{
		font-family: 'Noto Sans Japanese';
    	font-weight: 500;
    	line-height: 1.8em;
    	margin: 3vw auto 6vw;
    	clear: both;
    	color: white;
	}
	#modal_lineup .slider li .inner .inner_box .right .images li+li{
		margin-top: 5vw;
	}
	#modal_lineup .slider li .inner .inner_box .right .images li img{
		box-sizing: border-box;
    	border: solid 1px white;
	}
	#modal_lineup .slider li .inner .inner_box .right .copy{
		color: #bfbfbf;
    	font-size: 70%;
    	width: 100%;
    	display: inline-block;
    	margin: 3vw auto 15vw;
    	line-height: 1.5em;
    	text-align: center;
	}
}
@media screen and (max-width:1079px) and (min-width: 750px) {
	#modal_lineup .slider li.slick-slide:before{
		content: "";
    	background-size: 400% auto!important;
	}
}