@charset "utf-8";

/* CSS Document */
/*------------------------
	PC
------------------------*/
@media screen and (min-width:1080px){
	*:focus {
		outline: none;
	}
	.mfp-wrap.history .mfp-container{
		padding: 0!important;
	}
	.mfp-wrap.history .mfp-content{
		margin-top: -50px;
	}
	#history .slider {
        width: 100%!important;
        margin: 0 auto!important;
    }
    #history .slick-list {
        position: relative;
        padding: 0 20%!important;
        width: 60%!important;
		margin-top: 4vw;
    }
    #history .slick-slide {
		transition: all 300ms ease;
		transform: scale(0.8);
    }
	#history .slick-center{
		transition: all 300ms ease;
		transform: scale(1);
	}
    #history .slick-prev {
        position: absolute;
        left: 15%;
        top: 40%;
        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;
    }
    #history .slick-next {
        position: absolute;
        right: 15%;
        top: 40%;
        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);
    }
	#history .slick-arrow.slick-disabled {
        opacity: 0!important;
    }
	#history .slick-prev:before, #history .slick-next:before {
		content: "";
		display: block;
		position: absolute;
		top: 1.5vw;
		width: 3vw;
		height: 2px;
		background: #ff0000;
		transform: rotate(-45deg);
	}
	#history .slick-prev:after, #history .slick-next:after {
		content: "";
		display: block;
		position: absolute;
		bottom: 1.5vw;
		width: 3vw;
		height: 2px;
		background: #ff0000;
		transform: rotate(45deg);
	}
	#history .slick-dots{
		position: relative;
    	width: 984px;
    	margin: 30px auto!important;
	}
	#history .slick-dots:before{
		content: "";
		position: absolute;
		margin-left: 35px;
		top: 13px;
		width: 910px;
		height: 1px;
		background-color: rgba(255, 255, 255, 0.5);
	}
	#history .slick-dots li{
		margin: 0 26px;
	}
	#history .slick-dots li button:before{
		font-size: 33px;
		color: #c2c2c2;
		opacity: 1;
		font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', verdana, Helvetica,Arial, sans-serif;
	}
	#history .slick-dots li.slick-active button:before{
		color: #ff0000;
		transform: scale(1.9);
	}
	#history .slick-dots li button:after{
		content: "";
    	font-size: 19px;
    	color: rgba(194, 194, 194, 0.6);
    	position: absolute;
    	top: 45px;
    	left: -7px;
	}
	#history .slick-dots li:nth-child(1) button:after{
		content: "1987";
	}
	#history .slick-dots li:nth-child(2) button:after{
		content: "1991";
	}
	#history .slick-dots li:nth-child(3) button:after{
		content: "1992.4";
		left: -15px;
	}
	#history .slick-dots li:nth-child(4) button:after{
		content: "1992.12";
		left: -20px;
	}
	#history .slick-dots li:nth-child(5) button:after{
		content: "1993";
	}
	#history .slick-dots li:nth-child(6) button:after{
		content: "1994";
	}
	#history .slick-dots li:nth-child(7) button:after{
		content: "1995";
	}
	#history .slick-dots li:nth-child(8) button:after{
		content: "1996";
	}
	#history .slick-dots li:nth-child(9) button:after{
		content: "1997.2";
		left: -15px;
	}
	#history .slick-dots li:nth-child(10) button:after{
		content: "1997.10";
		left: -20px;
	}
	#history .slick-dots li:nth-child(11) button:after{
		content: "1998";
	}
	#history .slick-dots li:nth-child(12) button:after{
		content: "1999";
	}
	#history .slick-dots li.slick-active button:after{
		color: #ff2c2c;
	}
	#history .slider li.slick-slide dl{
		background-size: 100%!important;
		position: relative;
		padding-bottom: 60%;
		border: solid 1px #ff0000;
		box-sizing: border-box;
	}
	#history .slider li:nth-child(1) dl{
		background: url(../images/history/st_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(2) dl{
		background: url(../images/history/st2_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(3) dl{
		background: url(../images/history/st2d_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(4) dl{
		background: url(../images/history/st2dt_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(5) dl{
		background: url(../images/history/sst2_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(6) dl{
		background: url(../images/history/sst2x_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(7) dl{
		background: url(../images/history/stzero_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(8) dl{
		background: url(../images/history/stzero2_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(9) dl{
		background: url(../images/history/st3_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(10) dl{
		background: url(../images/history/st32nd_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(11) dl{
		background: url(../images/history/stzero3_bg.jpg) center center no-repeat;
	}
	#history .slider li:nth-child(12) dl{
		background: url(../images/history/st33rd_bg.jpg) center center no-repeat;
	}
	#history .slider .slick-slide dl dt{
		position: absolute;
		top: 11%;
		text-align: center;
		width: 100%;
		color: white;
		font-weight: bold;
		font-size: 2vw;
		text-shadow:0px 4px 1px black,0px 3px 1px black,1px 3px 1px black,2px 3px 1px black,2px 2px 1px black,3px 2px 1px black,3px 1px 1px black,3px 0px 1px black,4px 0px 1px black,3px -1px 1px black,3px -2px 1px black,3px -3px 1px black,2px -3px 1px black,2px -4px 1px black,1px -4px 1px black,0px -4px 1px black,-1px -4px 1px black,-2px -4px 1px black,-3px -4px 1px black,-3px -3px 1px black,-4px -3px 1px black,-4px -2px 1px black,-4px -1px 1px black,-4px 0px 1px black,-4px 1px 1px black,-4px 2px 1px black,-3px 2px 1px black,-3px 3px 1px black,-2px 3px 1px black,-1px 3px 1px black,3px 0px 20px black,3px 0px 20px black,3px 0px 20px black;
	}
	#history .slider .slick-slide dl dd.images{
		position: absolute;
		top: 24%;
		margin-left: 4%;
		width: 95%;
	}
	#history .slider .slick-slide dl dd.images img:first-child{
		float: left;
    	width: 46.6%;
    	margin-top: 2vw;
    	margin-right: 3%;
	}
	#history .slider .slick-slide dl dd.images img:last-child{
		float: left;
		width: 45%;
		border: solid 1px #ff0000;
	}
	#history .slider .slick-slide dl dd.text{
		position: absolute;
		top: 83.5%;
		left: 5%;
		width: 90%;
		font-size: 1vw;
	}
}
@media screen and (max-width:1300px){
	#history .slick-list {
        padding: 0 10%!important;
        width: 80%!important;
    }
	#history .slick-prev {
        left: 4%;
    }
    #history .slick-next {
        right: 4%;
    }
	#history .slick-dots:before{
		width: 864px;
	}
	#history .slick-dots{
		width: 936px;
	}
	#history .slick-dots li{
		margin: 0 24px;
	}
	#history .slick-dots li button:after{
		content: "";
    	font-size: 17px;
    	left: -5px;
	}
	#history .slick-dots li:nth-child(3) button:after{
		content: "1992.4";
		left: -12px;
	}
	#history .slick-dots li:nth-child(4) button:after{
		content: "1992.12";
		left: -17px;
	}
	#history .slick-dots li:nth-child(9) button:after{
		content: "1997.2";
		left: -12px;
	}
	#history .slick-dots li:nth-child(10) button:after{
		content: "1997.10";
		left: -17px;
	}
	#history .slider .slick-slide dl dt{
		font-size: 3vw;
	}
}
/*------------------------
	SP・TB
------------------------*/
@media screen and (max-width:1079px){
	/*------------------------
		history
	------------------------*/
	.mfp-wrap.history{
		position: absolute;
		overflow-x: visible!important;
		overflow-y: visible!important;
	}
	#history img{
		width: 100%;
		height: auto;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	#history ul{
		padding-bottom: 50%;
    	background: rgba(0, 0, 0, 0.9);
	}
	#history ul:before {
	    content: "";
    	background-color: rgba(255, 0, 0, 0.3);
    	position: fixed;
    	top: 0;
    	z-index: 10;
    	width: 30%;
    	margin: 0 35%;
    	height: 100%;
	}
	#history ul li{
		margin: 20vw 0;
		position: relative;
		z-index: 11;
	}
	#history ul li h5{
		font-family: 'Anton', sans-serif;
    	font-weight: normal;
    	color: black;
    	font-size: 350%;
    	text-align: center;
    	padding: 3% 0;
    	background: #fc901c;
	}
	#history ul li dl{
		background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 6px), black;
		padding: 3% 3.7% 5%;
		border-bottom: solid 1px #fc901c;
	}
	#history ul li dl dt{
		width: 100%;
		display: table;
	}
	#history ul li dl dt img{
		display: table-cell;
		margin-left: -2%;
	}
	#history ul li dl dt p{
		display: table-cell;
		width: 65%;
		color: white;
		font-size: 120%;
		font-weight: bold;
		line-height: 1.4em;
		vertical-align: middle;
	}
	#history ul li dl dd.images img{
		width: 90%;
		margin: 3% 5%;
		border: solid 1px #fc901c;
		box-sizing: border-box;
	}
}