@charset "utf-8";
/* CSS Document */


body,html { margin:0;width:100%; height:100%; background-color:#101313; }
body { color:#FFF; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; color:#DDDDDD; line-height:200%; font-size:16px;  }
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} /* IE11 */
}

header { width:100%; height:80px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#afafaf+0,f7f8f8+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#afafaf+0,f7f8f8+61 */
background-image:url(../img/bg.png); background-size:cover; background-position:center;

 box-shadow:0 2px 20px #000; z-index:99; position:relative;  border-bottom:4px solid #C9CACA; box-sizing:border-box;}
header h1 { width:100%; position:relative; line-height:0; }
header h1 img { position:absolute; height:20px; width:auto; top:30px; left:15px; }
header a img { height:15px; width:auto; }
header a.corp { position:absolute; top:32.5px; right:15px; line-height:0; }
footer { background-color:#232725; color:#ddd; text-align:center; font-size:9px; padding:100px; }

.nav { position:absolute; top:0; left:150px; height:100%; }
.nav li { display:inline-block; vertical-align:top; height:100%; }
.nav li a { display:block; padding:0 20px; color:#FFF; text-decoration:none; height:100%; line-height:80px; position:relative; }
.nav li a:after { width:100%; height:4px; background-color:#fff; position:absolute; bottom:-4px; left:0; content:""; opacity:0;
-webkit-transform:scaleX(0);
-moz-transform:scaleX(0);
-o-transform:scaleX(0);
-ms-transform:scaleX(0);
transform:scaleX(0);

-moz-transition: opacity 0.3s ease 0s,-moz-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.3s ease 0s,-webkit-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.3s ease 0s,-o-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.3s ease 0s,-ms-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.3s ease 0s,transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;

 }
.nav li:hover a:after { opacity:1;
-webkit-transform:scaleX(1);
-moz-transform:scaleX(1);
-o-transform:scaleX(1);
-ms-transform:scaleX(1);
transform:scaleX(1);	
}

body.fixed { position:fixed; width:100%; left:0; }
#main { width:100%; position:relative; height:85%; background-image:url(../img/mainbg.png); background-repeat:no-repeat; background-size:cover; }
/**#main:after { content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../img/1.png); background-repeat:no-repeat; background-size:auto 100%; }*/

.main { width:80%; margin:0 auto; height:100%; }
.main .h1 { width:50%; float:left; height:100%; position:relative; }
.main .h1 .h1Wrap { width:100%; position:absolute; left:0; top:50%; 
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
.main .h1 h1 img { width:100%; height:auto; }
.main .h1 h1 { margin-bottom:40px; }
.main figure { width:50%; float:left; position:relative; height:100%; z-index:2;  }
.main figure img { position:absolute; top:7%; left:0; width:100%; height:auto; }

.underMain { background-color:#484948; padding:80px; }
.underMain h2 { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size:34px; font-weight:bold; position:relative; z-index:3;}
.underMain h2 span { display:block; }

section { position:relative; margin-top:0px; background-image:url(../img/4.png); background-repeat:no-repeat; background-size:100% auto; overflow-x:hidden; overflow-y:visible; }
/**section:after {content:""; display:block; width:100%; height:300px; position:absolute; top:0; left:50%; background-image:url(../img/3.png); background-repeat:no-repeat; background-size:100% 200px; background-position:left top;
transform:translateX(-50%); }
h3.subTitle { height: 50px; width:100%; background-image:url(../img/subtitle.png); background-repeat:no-repeat; background-size:contain; position:absolute; top:20px; left:20px; z-index:1; margin:0; color:#FFF;}**/

section #sub {position:relative; content:""; display:block; width:100%; height:220px; background-image:url(../img/3.png); background-repeat:no-repeat; background-size:100% 200px; background-position:left top;
 }
h3.subTitle { height: 50px; width:100%; background-image:url(../img/subtitle.png); background-repeat:no-repeat; background-size:contain; position:absolute; top:20px; left:20px; z-index:1; margin:0; color:#FFF;}

.wrapper { width:1060px; margin:0px auto 0 auto; }
.wrapper.first { margin-top:150px; }
.topWrap { overflow:hidden; background-image:url(../img/bg.png); background-repeat:no-repeat; background-size:cover; }

h2 { font-size:46px; font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; font-weight:normal; line-height:120%; margin-bottom:50px; color:#FFF; position:relative; z-index:1;}
h2 img { width:750px; height:auto; }
#product { position:relative; min-height:610px; padding-bottom:70px; z-index:2; }
#product figure { position:absolute; top:-120px; right:-360px; width:900px; height:902px; z-index:0; }
#product figure img { width:100%; height:auto; }
h3.title { font-size:30px; line-height:146%;  color:#FFF; margin-bottom:25px;}
.pBox { width:660px; }
.product { width:100%; position:absolute; top:0; left:0; }
.product li:nth-child(1) { position:absolute; top:224px; left:683px; }
.product li:nth-child(2) { position:absolute; top:311px; left:797px; }


@media screen and (min-width: 1300px) {
	
#product figure {
    position: absolute;
    top: -120px;
    right: -460px;
    width: 1000px;
    height: 1004px;
    z-index: 0;
}	
}

@media screen and (min-width: 1400px) {

#product figure {
    position: absolute;
    top: -120px;
    right: -430px;
    width: 1000px;
    height: 1004px;
    z-index: 0;
}

.wrapper.first { width:1100px; }

}

@media screen and (min-width: 1500px) {

#product figure {
    position: absolute;
    top: -120px;
    right: -330px;
    width: 1000px;
    height: 1004px;
    z-index: 0;
}

.wrapper.first { width:1200px; }

}

@media screen and (min-width: 1600px) {

#product figure {
    position: absolute;
    top: -120px;
    right: -330px;
    width: 1100px;
    height: 1105px;
    z-index: 0;
}

.wrapper.first { width:1300px; }

}

@media screen and (min-width: 1600px) {

#product figure {
    position: absolute;
    top: -120px;
    right: -330px;
    width: 1200px;
    height: 1205px;
    z-index: 0;
}

.wrapper.first { width:1400px; }

.product li:nth-child(1) { position:absolute; top:324px; left:783px; }
.product li:nth-child(2) { position:absolute; top:411px; left:897px; }

}

@media screen and (min-width: 1800px) {

#product figure {
    position: absolute;
    top: -120px;
    right: -330px;
    width: 1300px;
    height: 1305px;
    z-index: 0;
}

.wrapper.first { width:1500px; }

.product li:nth-child(1) { position:absolute; top:324px; left:783px; }
.product li:nth-child(2) { position:absolute; top:411px; left:897px; }

}

.product li span { display:block; font-size:12px; color:#ddd; margin-top:18px; line-height:1; text-align:center; }
.clm3 li { width:calc( 33.333% - 26.66666666666667px ); display:inline-block; vertical-align:top; margin-right:40px; margin-bottom: 1em; }
.clm3 li.r { width:60% !important; display:inline-block; vertical-align:top; margin-right:0; }
.clm3 li img { width:100%; height:auto; }
.clm3 li:nth-child(3) { margin-right:0; }
.clm3 li p { color:#FFF; font-weight:bold; line-height:145%; }
.clm3 li p.nr { color:#FFF; font-weight:normal; font-size:84%; line-height:120%; }
.clm3a { margin-top:40px; width:693.32px; display:inline-block; vertical-align:top; margin-right:40px; }
.clm3a li img { width:100%; height:auto; }
.clm3a li { width:326.66px; display:inline-block; vertical-align:top; margin-right:40px; }
.clm3a li:nth-child(2) { margin-right:0; }
.clm3a li:nth-child(3) { margin-right:0px; width:auto; display:block;  }
.clm3a li p { color:#FFF; font-weight:bold; line-height:145%; margin-bottom:15px; }
.clm3a li p.p { font-size:13px; color:#ddd; line-height:145%; font-weight:normal; }
.clm3 li figure,.clm1 li figure,.clm3a li figure { position:relative; line-height:0; margin-bottom:0.7em; }
.clm3 li.play figure:after,.clm1 li.play figure:after { position:absolute; content:""; display:block; width:60px; height:60px; background-image:url(../img/play.svg); background-repeat:no-repeat; background-size:60px; top:50%; left:50%;
margin:-30px 0 0 -30px; }
.clm3 li.play figure,.clm1 li.play figure { cursor:pointer; }

.clm3 li.play figure img,.clm1 li.play figure img {
	-moz-transition: opacity 0.3s ease 0s,-moz-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.3s ease 0s,-webkit-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.3s ease 0s,-o-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.3s ease 0s,-ms-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.3s ease 0s,transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
}
.clm3 li.play figure:hover img,.clm1 li.play figure:hover img {
	opacity:.6; 
}
.clm3 li.play figure img,.clm1 li.play figure img { opacity:1; }
.clm3 li.play figure:before,.clm1 li.play figure:before {  }


.clm1 { display:inline-block;margin-top:40px; }
.clm1 li img { width:100%; height:auto; } 
.clm1 li p { color:#FFF; font-weight:bold; line-height:145%; }
.clm1 li { width:326.66px; display:inline-block; vertical-align:top; }

.clm2 { overflow:hidden; }
.clm2 li { float:left; }
.clm2 li:nth-child(1) { width:60%; }
.clm2 li:nth-child(2) { width:35%; float:right; }
.clm2 li:nth-child(1) img { width:100%; height:auto; }
.clm2 li p,p.strong { color: #FFF;
    font-weight: bold;
    line-height: 145%;
	margin-bottom:15px;}
	p.strong {
		 margin-top:40px;
	}
.clm2 li p.p { font-weight:normal; color:#ddd; }

div.play { height:44px; width:150px; text-align:center; line-height:44px; border:2px solid #FFF; box-sizing:border-box; border-radius:.3em; color:#FFF; font-weight:bold; cursor:pointer; }

.aten { background-color:#3F3B3A; padding:40px; font-size:11px; line-height:120%; margin-top:50px; }
.aten p.right { text-align:right; margin-top:1em; }

#new { background-color:#2D3131; margin-top:100px; padding-top:100px; padding-bottom:100px; line-height:1; }
#new h2 { text-align:center; line-height:1; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;}
#new h2 span { display:block; font-size:14px; margin-top:18px; }
#new .wrapper { margin-top:0; }
#new table { background-color:#242626;  color:#666; border:2px solid #919B9B; border-collapse:collapse; font-size:80%; }
#new table:nth-child(2) { margin-top:40px; }
#new table td { border:1px solid #3E4444; text-align:center; padding:.7em;  color:#ddd; }
#new table td p { margin-top:.5em; }
#new table td.pink { background-color:#B60066; color:#FFF; font-weight:bold; } 
#new table td.black { background-color:#231916; color:#FFF; font-weight:bold; } 
#new table td.gray { background-color:#666; color:#FFF; font-weight:bold; } 
.pro td { font-weight:bold; color:#231916; }
#new table td.relative { position:relative; }
.pro td,#new table td.relative { border-bottom:2px solid #5C6565!important; }
#new table td.relative span { display:block; position:absolute; width:100%; top:50%; left:0; 
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, #new table td.relative span { position:static; transform:translateY(70px); }
}

#bottom { overflow:hidden; margin-top:40px; }
#bottom .left { float:left; width:427px; overflow:hidden; }
#bottom .left figure { width:157px;float:left; }
#bottom .left .text { margin-left:188px; }
#bottom .left .text p { color:#FFF; font-weight:bold; line-height:1; font-size:14px; }
#bottom .left .text p span { color:#ddd; font-weight:normal; display:block; font-size:12px; margin-top:.5em; }
#bottom .left .text p:nth-child(2) { color:#ddd; margin-top:15px; line-height:145%; font-weight:normal; }
#bottom .right { margin-left:0; box-sizing:border-box; border:3px solid #DDDDDD; padding:20px; font-size:12px; line-height:120%; }
#bottom .left figure img { width:100%; height:auto; }

h3.title sup { font-size:9px; }

p.indent { text-indent:-2.5em; margin-left:2.5em; }
p.indent2 { text-indent:-1em; margin-left:1em; }
p.indent3 { border-left: 3px solid #fff; padding-left: 0.5em;}
.sp { display:none; }
.pc  { display:block; }

.underWrapper { width:100%; margin:0 auto; overflow:hidden; max-width:1400px;
display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	 }
.underWrapper figure,.underWrapper .right {  padding:20px; box-sizing:border-box; position:relative; }
.underWrapper figure { width:50%; }
.underWrapper .right { width:50%;padding:20px 0 ;  }
.underWrapper figure img { width:100%; height:auto; }
.underWrapper .right .rightBox { position:absolute; top:50%; left:0; width:100%;padding:0px 0px 0px 40px; box-sizing:border-box;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
 }

@media screen and (min-width: 871px) and (max-width: 1280px) {
	.underWrapper figure { width:60%; }
.underWrapper .right { width:40%;padding:20px 0 ;  }
}

@media screen and (min-width: 871px) {
	#main { min-height:620px; }
	body,html { min-width:1180px; }
}
@media screen and (min-width: 871px) and (max-width: 1059px) {
/**.wrapper { width:860px; }
.clm3a { margin-top:40px; width:560px; display:inline-block; vertical-align:top; margin-right:40px; }
.clm3a li { width:260px; display:inline-block; vertical-align:top; margin-right:40px; }
.clm1 li { width:260px; display:inline-block; vertical-align:top; }
.pBox { width:460px; }
h2 img {width: 456px; }
.product li:nth-child(1) { position:absolute; top:174px; left:483px; }
.product li:nth-child(2) { position:absolute; top:261px; left:597px; }**/
}

.dowinload { border:1px solid #888; padding:15px; margin-top:30px; }
.dowinload h5 { line-height:130%; }
.dowinload h5 a:link,.dowinload h5 a:active,.dowinload h5 a:visited { text-decoration: none; color: #fff !important; }
.dowinload h5 a:hover  { text-decoration: none; color: #398AD5 !important; }
.dowinload .qr { overflow:hidden; margin-top:15px; }
.dowinload .qr figure { width:100px; float:left; line-height:1; margin-right: 1em;}
.dowinload .qr figure img { width:100%; height:auto; }
.dowinload .qr p { /**margin-left:90px;**/ line-height:140%; font-size:80%; font-weight:normal; clear: both;}

@media screen and (max-width: 870px) {
	
	.underWrapper { width:100%; margin:0 auto; overflow:hidden; max-width:1400px;
display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	 }
.underWrapper figure,.underWrapper .right {  padding:0px; box-sizing:border-box; position:relative; }
.underWrapper figure { width:100%; margin-bottom:15px; }
.underWrapper .right { width:100%;padding:0px 0 ;  }
.underWrapper figure img { width:100%; height:auto; }
.underWrapper .right .rightBox { position:static; top:50%; left:0; width:100%;padding:0px 0px 0px 0px; box-sizing:border-box;
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
 }
 

header { height:127px; }
.nav {  width:100%; text-align:center; height:37px; left:0; top:80px; }
.nav li a { line-height:37px; }
.nav li:hover a:after { display:none; }

	body { font-size:14px; }
	.sp  { display:block; }
	.pc { display:none; }

#main { width:100%; position:relative; height:auto; background-repeat:no-repeat; background-size:cover; min-height:300px; overflow:hidden; }
#main:after { /**content:""; display:block; width:150%; height:100%; position:absolute; top:0; left:-10%; background-image:url(../img/1.png); background-repeat:no-repeat; background-size:auto 100%; **/}
#main h1 { /**width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../img/h1.png); background-repeat:no-repeat; background-size:70% auto; background-position:center; **/}
.main { width:auto; padding:15px; }
.main .h1 {
    width: auto;
    float: none;
    height: auto;
    position: relative;
}

.main figure {
    width: auto;
    float: none;
    position: relative;
    height: auto;
    z-index: 2;
}

.main figure img {
    position:static;
    top: 0%;
    left: 0;
    width: 100%;
    height: auto;
}

.main .h1 .h1Wrap {
    width: 100%;
    position:static;
    left: 0;
    top: 0%;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.main .h1 h1 {
    margin-bottom: 10px;
}

.underMain h2 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    z-index: 3;
	text-align:left;
	margin-bottom:10px;
}
.underMain p { text-align:left; }

.underMain { padding:15px; }

div.play { margin-left:auto; margin-right:auto; }


.clm2 li { float:none; }
.clm2 li:nth-child(1) { margin-bottom:10px; }
.clm2 li:nth-child(1),.clm2 li:nth-child(2) { width:auto; float:none; }

section { position:relative; margin-top:0px; background-image:url(../img/4.png); background-repeat:no-repeat; background-size:100% auto; overflow-x:hidden; overflow-y:visible; background-color:#0D0F10; }
/**section:after {content:""; display:block; width:100%; height:200px; position:absolute; top:0; left:50%; background-image:url(../img/3.png); background-repeat:no-repeat; background-size:100% 100px; background-position:left top;
transform:translateX(-50%); }
h3.subTitle { height: 20px; width:100%; background-image:url(../img/subtitle.png); background-repeat:no-repeat; background-size:contain; position:absolute; top:10px; left:10px; z-index:1; margin:0; color:#FFF;}**/

section #sub {position:relative; content:""; display:block;width:100%; height:72px; top:0; left:0%; background-image:url(../img/3.png); background-repeat:no-repeat; background-size:100% 70px; background-position:left top;
 }
h3.subTitle { height: 15px; width:100%; background-image:url(../img/subtitle.png); background-repeat:no-repeat; background-size:contain; position:absolute; top:10px; left:10px; z-index:1; margin:0; color:#FFF;}

.wrapper { width:auto; margin:0px auto 0 auto; padding:15px; }
.wrapper.first { margin-top:30px; }
.topWrap { background-image:none; }

h2 { font-size:23px; font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; font-weight:normal; line-height:120%; margin-bottom:20px; color:#FFF;}
h2 img { width:100%; height:auto; max-width:500px; }
#product { position:relative; min-height:610px; padding-bottom:30px; }
#product figure { position:static; top:0px; right:0px; width:100%; height:auto; text-align:center; }
#product figure img { width:100%; height:auto; max-width:500px; }
h3.title { font-size:20px; line-height:146%;  color:#FFF; margin-bottom:15px;}
.pBox { width:auto; }
.product { width:100%; position:static; top:0; left:0; margin-bottom:30px; text-align:center; }
.product li:nth-child(1) { position:static; top:174px; left:483px; }
.product li:nth-child(2) { position:static; top:261px; left:597px; }
.product li { display:inline-block; vertical-align:top; width:50%; padding:10px; box-sizing:border-box; }
.product li span { display:block; font-size:12px; color:#ddd; margin-top:18px; line-height:1; }
.clm3 li { width:auto; display:block; vertical-align:top; margin-right:0px; margin-bottom:20px; }
.clm3 li.r { width:100% !important; display:block; vertical-align:top; margin-right:0px; margin-bottom:20px; }	
.clm3 li img { width:100%; height:auto; } 
.clm3 li:nth-child(3) { margin-right:0; }
.clm3 li p { color:#FFF; font-weight:bold; line-height:145%; }
.clm3a { margin-top:20px; width:auto; margin-right:0; }
.clm3a li img { width:100%; height:auto; }
.clm3a li { width:auto; display:block; vertical-align:top; margin-right:0px; }
.clm3a li:nth-child(3) { margin-right:0px; width:auto; display:block;  }
.clm3a li p { color:#FFF; font-weight:bold; line-height:145%; margin-bottom:10px; }
.clm3a li p.p { font-size:13px; color:#ddd; line-height:145%; font-weight:normal; }
.clm3a li:nth-child(2) {  }
.clm1 { display:block; margin-top:20px; }
.clm1 li { width:auto; }
.clm3 li.play figure img, .clm1 li.play figure img { opacity:1; }

.clm2 { margin-top:30px; }

.aten { background-color:#3F3B3A; padding:20px; font-size:11px; line-height:120%; margin-top:20px; }
.aten p.right { text-align:right; margin-top:1em; }

#new { background-color:#2D3131; margin-top:30px; padding:15px 10px; }
#new h2 { text-align:center; line-height:140%; }
#new h2 img { width:80%; height:auto; }
#new h2 span { display:block; font-size:12px; margin-top:18px; line-height:140%; }
#new .wrapper { margin-top:0; padding:0; }
#new table {  color:#666; border:1px solid #231916; border-collapse:collapse; font-size:60%;table-layout: fixed; }
#new table:nth-child(2) { margin-top:20px; }
#new table td {  text-align:center; padding:.2em; line-height:120%;word-wrap: break-word; }
#new table td.pink { background-color:#B60066; color:#FFF; font-weight:bold; width:60%; } 
#new table td.black { background-color:#231916; color:#FFF; font-weight:bold; width:60%; } 
#new table td.gray { background-color:#666; color:#FFF; font-weight:bold; width:60%; } 	
.pro td { font-weight:bold; color:#231916; }
#new table td.relative { position:relative; }
#new table td.relative span { display:block; position:absolute; width:100%; top:50%; left:0; 
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}


#new table td img { width:100%; height:auto; }
#new table td.ver { 

		  }

#bottom { overflow:hidden; margin-top:40px; }
#bottom .left { float:none; width:auto; overflow:hidden; margin-bottom:20px; }
#bottom .left figure { width:70px;float:left; }
#bottom .left .text { margin-left:90px; }
#bottom .left .text p { color:#FFF; font-weight:bold; line-height:1; font-size:14px; }
#bottom .left .text p span { color:#ddd; font-weight:normal; display:block; font-size:12px; margin-top:.5em; }
#bottom .left .text p:nth-child(2) { color:#ddd; margin-top:15px; line-height:145%; font-weight:normal; }
#bottom .right { margin-left:0; box-sizing:border-box; border:3px solid #DDDDDD; padding:20px; font-size:12px; line-height:120%; }

h3.title sup { font-size:9px; }

p.indent { text-indent:-2.5em; margin-left:2.5em; }	
	
	
}

@media all and (-ms-high-contrast:none) and (max-width: 870px){
*::-ms-backdrop, #new table td.relative span { position:static; transform:translateY(70px); }
}

.modal { position:fixed; top:50%; left:50%; z-index:9999; width:80%;

-webkit-transform:translate(-50%,100%) scale(0);
-moz-transform:translate(-50%,100%) scale(0);
-o-transform:translate(-50%,100%) scale(0);
-ms-transform:translate(-50%,100%) scale(0);
transform:translate(-50%,100%) scale(0);

-webkit-transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
transform-origin:50% 100%;

opacity:0;

	
	-moz-transition: opacity 0.3s ease 0s,-moz-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.3s ease 0s,-webkit-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.3s ease 0s,-o-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.3s ease 0s,-ms-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.3s ease 0s,transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
 }
 
 .youtube {
	 position:relative;
  width:100%;
  padding-top:56.25%;
 }
 .youtube iframe {
    position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

.modal.open { 
-webkit-transform:translate(-50%,-50%) scale(1);
-moz-transform:translate(-50%,-50%) scale(1);
-o-transform:translate(-50%,-50%) scale(1);
-ms-transform:translate(-50%,-50%) scale(1);
transform:translate(-50%,-50%) scale(1);
opacity:1;
}

#close { width:60px; height:60px; border-radius:50%; background-color:rgba(0,0,0,.8); position:fixed; top:20px; right:20px; opacity:0; z-index:9999; cursor:pointer; background-image:url(../img/close.svg); background-repeat:no-repeat; background-position:center; background-size:20px;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);
-moz-transition: opacity 0.3s ease 0s,-moz-transform 0.3s ease 0s;
-webkit-transition: opacity 0.3s ease 0s,-webkit-transform 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s,-o-transform 0.3s ease 0s;
-ms-transition: opacity 0.3s ease 0s,-ms-transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s,transform 0.3s ease 0s;

 }
.modal.open~#close { opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
 }
.modal.open~#overlay { width:100%; height:100%; background-color:rgba(0,0,0,.9); position:fixed; top:0; left:0; z-index:9998; }
.modal.open~#close:hover { opacity:0.6; }

@media screen and (max-width: 870px) {
	.modal {  width:100%; height:100%; }
	
	#close { width:40px; height:40px; border-radius:50%; background-size:10px; top:10px; right:10px;
 }
 .modal.open~#overlay { cursor:pointer; }
 .modal { height:auto; }
 footer { background-color:#232725; color:#ddd; text-align:center; font-size:9px; padding:10px; }
}