/* CSS Document */
@charset "UTF-8";
/* CSS Initialization  *//*reset CSS*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,img { margin:0; padding:0; }
body { background:#111; color:#333; font-size:14px; font-family:"メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Verdana", "Arial", "Helvetica", sans-serif;}
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#fffed8; text-decoration:none; }
a:hover { text-decoration:none; }
img { width: 100%; border:none; vertical-align: bottom}
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}
.clear{ clear:both;}
/* END CSS Initialization */

/*HTML5*/
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
/*ENDHTML5*/

body{ height: 100%; background-image: url(../img/bg.png); background-size: contain; background-attachment: fixed;}

.wrap{  width: 100%;  margin: 0 auto;}
.header{ width: 100%; height: auto; margin: 0 auto; display: block; max-width: 1000px; position: relative; background: #000;}
.vedio_position{width: 141px; height: 139px; display: block; position: absolute; left: 50%; margin-left: -30%; top: 30%;}
@media only screen and (min-width: 1000px) {
	.header{ width: 100%; height: auto; margin: 0 auto; display: block; max-width:100% ;}
	.vedio_position{ margin-left: -25%; bottom: 40%;}
}

.vedio_wrap{ width: 141px; height: 139px; position: relative;}
.vedio_bg{ position: absolute; top: 0; left: 0;}
.pvbtn{ position: absolute; top: 0; left: 0; cursor: pointer;}

.top_links{ width: 100%; max-width: 1000px; margin:0 auto; margin-top: -140px; padding: 20px 0; }
@media only screen and (min-width: 1200px) {
    .top_links{margin-top: 0; }
}

@media only screen and (min-width: 1200px) and (max-width: 1920px) {
    .top_links{margin-top: -140px; }
}

.downloads{ text-align: center;}
.downloads a{ width: 25%; display: inline-block; margin: 0 3%;}
.twitter{width:25%; margin: 2% auto 0;}


.section{ width: 100%; position: relative; margin: 2% auto; max-width: 1000px;}
h2.section_title{ width: 89%; margin: 2% auto;}
.section1{ width: 100%;}
.hero_list{ width: 80%;}
.hero_list li{ display: none;}
.hero_sdbox{ width: 50%; position: absolute; top: 4%; right: 0; display: block;}
.hero_sd{ width: 100%; display: block; position: relative; height: 100%; margin-top: 13%;}
.hero_sd li{ width: 50%; position: absolute;}
.hero_sd .hero_sd_1{ position: absolute; top: 0; right:50%;}
.hero_sd .hero_sd_2{ position: absolute; margin-top: 25%; right:0;}
.hero_sd .hero_sd_3{ position: absolute; margin-top: 50%; right:50%;}
.hero_sd .hero_sd_4{ position: absolute; margin-top: 75%; right:0%;}
.hero_sd .hero_sd_5{ position: absolute; margin-top: 100%; right:50%;}

.sd_on{ display: none;}
.on .sd_on{ display: block;}
.on .sd_off{ display: none;}


.TopSystem{ width: 100%; }
.swiper-slide { width: 55%;}
.swiper-button-next { width: 8%; background: none; right:17%;}
.swiper-button-prev { width: 8%; background: none; left:17%}


.banner-swiper {width: 80%;  margin:2% auto; overflow: hidden;}
.swiper-pagination-bullet {background: #fff; width: 14px; height: 14px;}

.TopNews{ width: 100%;}
.notice{}
.notice a{ display: block; width: 90%; margin: 0 auto; border-bottom: 1px solid #FFFFFF; box-sizing: border-box; padding: 2% 0;}

.notice a span{ display: block;}
.notice .notice_date{ color: #eeeeee; font-size: 1.5rem;}
.notice .notice_msg{ color: #FFFFFF; font-size: 2rem;}

.TopStory{ width: 100%;}

.Toplinks{}
.site_links{margin: 0 auto; overflow: hidden;}
.site_links a{ display: block; width: 40%; float: left; margin: 1% 5%;}

.spec{ width: 100%; background: #000; margin-bottom: 0;}
.info{ width: 100%; box-sizing: border-box; padding: 5% 0;}
.info table{ width: 70%; margin: 0 auto; color: #FFFFFF;}
.info table {vertical-align: middle;}
.info table img{ width: 50%; border-radius:15%;}

.info table td{ font-size: 1.5rem; border:1px solid #eee; padding: 3px 5px;}

.foot{ background: #FFFFFF; color: #333333; text-align: center;  padding: 20px 0;}
.company img{ width: 187px;}
.company a{ color: #333333;}

.mask{ width: 100%; height: 100%; background: #000000; opacity: 0.7; display: none; position: fixed; top: 0; left: 0; transition: 0.3s;}
.pv_box{ position: fixed; width: 900px; height: 500px; top: 50%; margin-top: -250px; left: 50%; margin-left: -450px; display: none; background: #000000; z-index: 9999;}