@charset "utf-8";


/* keyVisual
--------------------------------------------------------------------- */
#keyVisual {
    position: relative;
    overflow: hidden;
}

#keyVisual .bgImg.blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px);
}
#keyVisual .bgImg {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
    -webkit-transition: -webkit-filter,-moz-filter,filter 0.4s ease-out;
    -moz-transition: -webkit-filter,-moz-filter,filter 0.4s ease-out;
    -o-transition: -webkit-filter,-moz-filter,filter 0.4s ease-out;
    transition: -webkit-filter,-moz-filter,filter 0.4s ease-out;
}
#keyVisual .bgImg li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}
#keyVisual .bgImg li:nth-child(1),
#keyVisual .bgImgBlur li:nth-child(1) {
    z-index: 9;
}
#keyVisual .bgImg li:nth-child(2),
#keyVisual .bgImgBlur li:nth-child(2) {
    display: none;
    z-index: 8;
}
#keyVisual .bgImg li:nth-child(3),
#keyVisual .bgImgBlur li:nth-child(3) {
    display: none;
    z-index: 7;
}
#keyVisual .bgImg li:nth-child(4),
#keyVisual .bgImgBlur li:nth-child(4) {
    display: none;
    z-index: 6;
}
#keyVisual .bgImg li:nth-child(5),
#keyVisual .bgImgBlur li:nth-child(5) {
    display: none;
    z-index: 5;
}
#keyVisual .bgImg li:nth-child(6),
#keyVisual .bgImgBlur li:nth-child(6) {
    display: none;
    z-index: 4;
}
#keyVisual .bgImg li:nth-child(7),
#keyVisual .bgImgBlur li:nth-child(7) {
    display: none;
    z-index: 3;
}
#keyVisual .bgImg li:nth-child(8),
#keyVisual .bgImgBlur li:nth-child(8) {
    display: none;
    z-index: 2;
}

#keyVisual .bgImgBlur {
    position: absolute;
    top: 25.3216%;
    right: 60px;
    width: 348px;
    height: 439px;
    overflow: hidden;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 10;
}
#keyVisual .bgImgBlur li {
	content: '';
	position: absolute;
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	filter: blur(10px);
}

#keyVisual .dummy {
    width: 100%;

}

#keyVisual > .txt {
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    padding: 0 60px;
    box-sizing: border-box;
    z-index: 10;
    color: #fff;
	
}
#keyVisual > .txt .kvTtl {
    display: block;
    font-size:50px;
    line-height: 1.15;
	font-weight:bold;
}
#keyVisual > .txt .kvTtl .ja {
    font-size: 50px;
}
#keyVisual > .txt .kvTtl .light {
}
#keyVisual > .txt .kvSubTtl {
    font-size: 18px;
    display: block;
    padding-top: 15px;
    letter-spacing: 0.15em;
}

#keyVisual > .txt a {
    display: inline-block;
    color: #fff;
	font-size:18px;
    border: 1px solid #fff;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin-top: 59px;
    padding: 0 20px 0 20px;
    background: url(../images/ico_arrow01.png) 95% center no-repeat;
    height: 48px;
    line-height: 48px;
    min-width: 200px;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#keyVisual > .txt a:hover {
    color: #444;
    background: #fff url(../images/ico_arrow02.png) 95% center no-repeat;
}

#keyVisual > .txt ul li {
    position: absolute;
    left: 60px;
    top: 0;
    margin-right: 25%;
    font-size: 14px;
}
@media screen and (max-width: 1830px) { #keyVisual > .txt ul li { margin-right: 27%; } }
@media screen and (max-width: 1630px) { #keyVisual > .txt ul li { margin-right: 31%; } }
@media screen and (max-width: 1530px) { #keyVisual > .txt ul li { margin-right: 34%; } }
@media screen and (max-width: 1430px) { #keyVisual > .txt ul li { margin-right: 36%; } }
@media screen and (max-width: 1330px) { #keyVisual > .txt ul li { margin-right: 37%; } }
@media screen and (max-width: 1230px) { #keyVisual > .txt ul li { margin-right: 38%; } }

#keyVisual > .txt > ul > li:nth-child(n+2) {
    display: none;
}
#keyVisual > .txt > ul > li .en {
    font-family:'DIN Next W06 Regular';
    font-size: 16px;
    letter-spacing: 0.2em;
}

#keyVisual #kvNavi {
    position: absolute;
    top: 25.3216%;
    right: 60px;
    width: 348px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 10;
}

#keyVisual #kvNavi > div {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    background: url(../common/images/bg_white_a20.png);
}
#keyVisual .pagerOn #kvNavi > div {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

#keyVisual .pagerOn #kvNavi > div {
    position: absolute;
    top: 0;
    width: 348px;
    height: 439px;
}

#keyVisual #btnNext,
#keyVisual #btnPrev {
    display: none;
}
#keyVisual .pagerOn #btnNext,
#keyVisual .pagerOn #btnPrev {
    display: block;
    width: 348px;
    height: 24px;
    position: absolute;
    z-index: 10;
    background: url(../common/images/bg_white_a20.png);
}
#keyVisual .pagerOn #btnNext a,
#keyVisual .pagerOn #btnPrev a {
    display: block;
    height: 24px;
    text-align: center;
    line-height: 16px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#keyVisual .pagerOn #btnNext a:hover,
#keyVisual .pagerOn #btnPrev a:hover {
    background-color: rgba(255,255,255,0.3);
}

#keyVisual .pagerOn #btnPrev {
    top: -24px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
#keyVisual .pagerOn #btnNext {
    top: 439px;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.5);
}
#keyVisual .pagerOn .bgImgBlur {
    top: 25%;
    height: 487px;
    margin-top: -24px;
}
#keyVisual .line3 .bgImgBlur {
    height: 377px;
}
#keyVisual .line2 .bgImgBlur {
    height: 267px;
}
#keyVisual .line1 .bgImgBlur {
    height: 157px;
}
#keyVisual .pagerOn #kvNavi {
    top: 25%;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

#keyVisual .pagerOn #kvNavi ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 348px;
}
#keyVisual:after {
    content: url("../images/dummy.gif") ;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#keyVisual #kvNavi li {
    position: relative;
    height: 110px;
    padding: 38px 0 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    cursor: pointer;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#keyVisual #kvNavi li:last-child {
    border: none;
}

#keyVisual #kvNavi li.act:after,
#keyVisual #kvNavi li:hover:after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 34px;
    width: 3px;
    height: 34px;
    background-color: #fff;
}

#keyVisual #kvNavi li:hover,
#keyVisual #kvNavi li.act {
    background-color: rgba(255,255,255,0.3);
}

#keyVisual #kvNavi li .thum img {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 122px;
    height: 69px;
}

#keyVisual #kvNavi li .txt {
    display: block;
    font-size: 16px; text-transform:uppercase; 
    margin-bottom: 3px;
}


@media screen and (max-width:1366px) {
	
	#keyVisual .pagerOn #kvNavi > div { height:330px; top:10px;}
	#keyVisual .pagerOn #btnNext { top: 339px;}
	#keyVisual .pagerOn #btnPrev{ top:-14px;}
}