@charset "utf-8";

/* _________________130709_____________________ */
#comment_box0709{
	color: #FFF;
	position: fixed;
	width: 100%;
	background: #17212B;
	z-index: 100;
}
#comment_box0709 p{
	width: 680px;
	height: 40px;
	margin: 0 auto;
	padding: 10px;
}


/* General
--------------------------------------------------------------------------- */
	html{
		background:  #FFF;
		min-width: 960px;
	}
	.ie html {
		height:650px;
	}
	body#windows{
		color: #fff;
		font-size: 12px;
		font-weight: normal;
		line-height: 1.4;
		margin: 0;
	}
	div#big_container{
		background: url(../images/landing/body_back.png) 50% 0 no-repeat;
		position: relative;
		z-index: 2;
		min-width: 1240px;
	}
	li {
		list-style:none;
		}

/* container
------------------------------ */
#container {
	width: 1240px;
	min-width:1240px;
	min-height: 520px;
	position:relative;
	margin: 0 auto;
	z-index:5;
	height: 750px;
	padding: 5px 0 0;
}
		/* container bottom*/
	div#fake_bottom{
		background:url(../images/landing/container_%20buttom.jpg) no-repeat 50% 0;
		width:856px;
		height:46px;
		position: relative;
		top: -102px;  /*通常*/
		/*top: -342px; .jackバナーがある場合*/
		}
	div#container_farme{
	background: url(../images/landing/conatine_frame.png) repeat-x;
	width:100%;
	height:48px;
	position: relative;
    top: 2px;
	}


h1 {
	width:260px;
	height:147px;
	margin: 0;
	}
h1 a{
	width: 260px;
	height: 147px;
	display: block;
	border:none;
	}
h2 {
    height: 63px;
    margin: 10px 0 20px 10px;
    width: 880px;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
	background:url(../images/landing/h2_text.png) no-repeat 0 bottom;
	}
#content{
	width: 950px;
	min-height: 520px;
	}
h3 {
	background:url(../images/landing/h3_img.png) no-repeat 50% 0;
	width:461px;
	height:94px;
	position:relative;
	top: -500px;
	left: 830px;
	white-space:nowrap;
	overflow:hidden;
	text-indent: 100%;
	}

/* jack
------------------------------ */
.jack{
	display: none;
}
.jack img {
	position: relative;
	top: -400px;
	left: 830px;
}

/* con_left
------------------------------ */
#container #con_left{
	background:url(../images/landing/leftcont_bg.png) no-repeat 50%;
	width:477px;
	height:487px;
	float: left;
}
	/* movie */
	p.top {
		background:url(../images/landing/yt_top.png) no-repeat 50% 0;
    height: 18px;
    margin: 0 0 -18px 8px;
    position: relative;
    width: 463px;
    z-index: 5;
			}
	.movie{
		width:450px;
		margin: 0 0 0 11px;
	}
	ul.info{
    height: 140px;
    margin: -2px 0 13px 14px;
    width: 450px;
	padding:0;
		}
a {
	text-decoration: none;
}
/* --- Container configuration ---------------------------------------------------------- */
.viewport {
	float: left;
	height: 139px;
	overflow: hidden;
	position: relative;
	width: 221px;
	margin: 0 1px 0 2px;
}
.no-margin {
	margin-right: 0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
	display: block;
	position: relative;
	width:221px;
}
.viewport a img {
	height: 139px;
	position: relative;
	width: 221px;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
	display: none;
	font-size: 2.3em;
	font-weight: bold;
	height: 100%;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 100%;
	z-index: 100;
	padding: 40px 0;
	 font-family: UD Shin Go Heavy;
	 line-height: 35px;
	 font-size: 27px;
}
/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
	background-color: rgba(15, 15, 15, 0.6);
	color: #fff;
	text-shadow: #000 0px 0px 20px;
}
.dark-background em {
	color: #ccc;
}
/* con_right
------------------------------ */
  #container #con_right{
	  background:url(../images/landing/rightcont_bg.jpg) no-repeat 0px 0;
	  width:282px;
	  height:487px;
	  float: left;
	  margin: 0 0 0 10px;
	  padding: 5px 0 0;

  }
		  #con_right ul{
		  width:260px;
		  padding:0;
		  position: relative;
		  top:-421px;
		  /* top: -265px; */
			/* スライド機能が停止しているので代替案 */
			/*top: -60px;*/
		  margin: 0 0 -60px;
		  }
			  #con_right ul li {
			  margin: 5px 0 0 5px;
			  }
			  #con_right ul li.id_toroku a {
			  background:url(../images/landing/ID_btn.png) no-repeat 50% 0;
			  height:265px;
			  width:282px;
			  display:block;
			  position: relative;
			  -webkit-transition: all 1s ease;
			  -moz-transition: all 1s ease;
			  -o-transition: all 1s ease;
			  text-indent: 100%;
			  white-space: nowrap;
			  overflow: hidden;

			  }
				  #con_right ul li.id_toroku a:hover {
				  background:url(../images/landing/ID_btn_hover.png) no-repeat 50% 0;
				  -webkit-transform: scale(1);
				  transform: scale(1);
				  }

				#con_right ul li.dl a {
				background:url(../images/landing/dlbotan.png) no-repeat 50% 0;
				height:140px;
				width:252px;
				display:block;
				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;

				}
				  #con_right ul li.dl a:hover {
				  background:url(../images/landing/dlbotan_hover.png) no-repeat 50% 0;
				  display:block;
				  }
				#con_right ul li.dl_mac a {
				background:url(../images/landing/dlbotan_mac.png) no-repeat 50% 0;
				height:140px;
				width:252px;
				display:block;
				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;
				}
				#con_right ul li.dl_mac a:hover {
				  background:url(../images/landing/dlbotan_hover_mac.png) no-repeat 50% 0;
				  display:block;
					}
			.win #con_right ul li.dl_mac a {
				display:none;
				}
			.mac #con_right ul li.dl a {
				display:none;}
			#con_right ul li.home {
			color: #FFFFFF;
			margin: 23px 10px;
			width: 250px;
			}

				  #con_right ul li.home a {
				  text-decoration: none;
				  font-size: 15px;
				  padding: 15px 35px;
				  font-weight: bold;
				  background: #0400ac; /* Old browsers */
				  background: -moz-linear-gradient(top,  #0400ac 0%, #001e62 100%); /* FF3.6+ */
				  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0400ac), color-stop(100%,#001e62)); /* Chrome,Safari4+ */
				  background: -webkit-linear-gradient(top,  #0400ac 0%,#001e62 100%); /* Chrome10+,Safari5.1+ */
				  background: -o-linear-gradient(top,  #0400ac 0%,#001e62 100%); /* Opera 11.10+ */
				  background: -ms-linear-gradient(top,  #0400ac 0%,#001e62 100%); /* IE10+ */
				  background: linear-gradient(to bottom,  #0400ac 0%,#001e62 100%); /* W3C */
				  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0400ac', endColorstr='#001e62',GradientType=0 ); /* IE6-9 */
				  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,48,255,1);
				  -moz-box-shadow: 0px 0px 5px 0px rgba(0,48,255,1);
				  box-shadow: 0px 0px 5px 0px rgba(0,48,255,1);
				  }
				  #con_right ul li.home a:link {
				  color:#FFF;
				  }
				  #con_right ul li.home a:visited {
				  color:#CCC;
				  }
				  #con_right ul li.home a:hover {
				  background: #0400ac; /* Old browsers */
				  background: -moz-linear-gradient(top,  #0400ac 0%, #0401ad 24%, #0047f7 80%, #004dfd 100%); /* FF3.6+ */
				  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0400ac), color-stop(24%,#0401ad), color-stop(80%,#0047f7), color-stop(100%,#004dfd)); /* Chrome,Safari4+ */
				  background: -webkit-linear-gradient(top,  #0400ac 0%,#0401ad 24%,#0047f7 80%,#004dfd 100%); /* Chrome10+,Safari5.1+ */
				  background: -o-linear-gradient(top,  #0400ac 0%,#0401ad 24%,#0047f7 80%,#004dfd 100%); /* Opera 11.10+ */
				  background: -ms-linear-gradient(top,  #0400ac 0%,#0401ad 24%,#0047f7 80%,#004dfd 100%); /* IE10+ */
				  background: linear-gradient(to bottom,  #0400ac 0%,#0401ad 24%,#0047f7 80%,#004dfd 100%); /* W3C */
				  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0400ac', endColorstr='#004dfd',GradientType=0 ); /* IE6-9 */

				  }
  /* text */
  #con_right .img_txt{
  height: 488px;
  left: 470px;
  margin: 0;
  position: relative;
  top: -380px;
  width: 150px;
  }
  #con_right .img_txt2{
  height: 42px;
  left: 7px;
  margin: 0;
  position: relative;
  top: -430px;
  width: 449px;
  }

/* stepArea
------------------------------ */
#stepArea{
	background: url(../images/landing/bg_nav.png) 0 0 no-repeat;
	width: 996px;
	height: 141px;
	margin: 0 auto;
	position: relative;
	top: -40px;
	left: 0px;
	clear:both;
}
	/* box */
	#stepArea .box{
		width: 920px;
		margin: 0 auto;
		z-index: 20;
		/*background: #006;*/
	}
		#stepArea .box h4 {
			display:block;
			height:0;
			overflow:hidden;
		}


/*06. Footer
--------------------------------------------------------------------------- */
#footer{
    clear:both;
    height:70px;
    margin:0 auto;
    width:1250px;
	left:340px;
}
#footer ul.copyright{
	width:300px;
	float:left;
	height:85px;
	}

	#footer ul.copyright li{
    color: #000112;
    font-size: 14px;
    font-weight: 700;
    height: 40px;
    width: 230px;
	font-style:normal;
	font-family: Arial;
	 text-align: center;
	}
	#footer ul.copyright li a{
	  width: 265px;
	  height: 41px;
	  background: url("/images/landing/logo_cs.png") 0 0 no-repeat;
	  display:block;
	  text-indent: 100%;
	  white-space: nowrap;
	  overflow: hidden;
	}
	.ie #footer ul.copyright li a{
	  width: 265px;
	  height: 41px;
	  background: url("/images/landing/logo_cs.png") 0 0 no-repeat;
	  display:block;
	  text-indent: 9999px;
	  white-space: nowrap;
	  overflow: hidden;
	}
	 .chrome #footer ul.copyright li a{
	  width: 265px;
	  height: 41px;
	  background: url("/images/landing/logo_cs.png") 0 0 no-repeat;
	  display:block;
	  text-indent: 9999px;
	  white-space: nowrap;
	  overflow: hidden;
	}
#footer ul.box_social{
	width:450px;
	margin: 30px 0 0 50px;
	float:left;
	}

#footer ul.box_social li{
	float:left;
	}
#footer ul.box_social li:nth-child(1) {
	width:100px;
 margin: 0 40px 0 0;
 	}
#footer ul.box_social li:nth-child(2) {
	width:90px;
 margin: 0 5px 0 0;
 	}
#footer ul.box_social li:nth-child(3) {
	width:60px;
 margin: 0 5px 0 0;
 	}
#footer ul.box_social li:nth-child(4) {
	width:180px;
 margin: 0 5px 0 0;
 	}
.example_shown {
  display:inline-block;
  cursor:pointer;
}

.example_hidden {
  display:none;
}

/*.example_shown:hover .example_hidden {
  display:inline-block;
}*/
.example_hidden a {
	display:block;
	width:150px;
	height:100px;
	position:relative;
	top:-150px;
	left:100px;
	font-size:24px;
	color:#FFF;
	background:#909;
	}

	.slide_panel_wrap {
width:510px;
position:relative;
overflow:hidden;
}
.slide_panel {
margin-left:-474px;
width:474px;
background: url(../images/landing/toroku_bg.png) repeat-y 50% 0;
position:relative;
top:0;
left:0;
position:relative;
z-index:4;
}

.slide_panel.active {
margin-left:-474px;
width:474px;
height:486px;
background: url(../images/landing/toroku_bg.png) no-repeat 50% 0;
position:relative;
top:0;
left:0;
z-index:5;
}
.slide_panel p.title {
    position: relative;
    top: -259px;
    width: 400px;
	background:url(../images/landing/toroku_title.png) no-repeat 50% 0;
	width:430px;
	height:103px;
	margin: 0 15px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
	}
.slide_panel a.open {
	background: url("../images/landing/ID_btn.png") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);
    width: 282px;
    height: 265px;
    cursor: pointer;
    display: block;
    left: 480px;
    overflow: hidden;
    position: relative;
    text-indent: 100%;
    transition: all 1s ease 0s;
    white-space: nowrap;

	}
.slide_panel a.open:hover {
	background:url(../images/landing/ID_btn_hover.png) no-repeat 50% 0;
						}
	.slide_panel a.hide {
	background: url("../images/landing/ID_btn.png") no-repeat scroll -248px 0 rgba(0, 0, 0, 0);
    height: 265px;
    width: 40px;
    cursor: pointer;
    display: block;
    overflow: hidden;
    position: relative;
    text-indent: 100%;
    transition: all 1s ease 0s;
    white-space: nowrap;
	left: 473px;
	}
	.slide_panel a.hide:hover {
	background: url("../images/landing/ID_btn.png") no-repeat scroll -248px 0 rgba(0, 0, 0, 0);
	}
.slide_panel div#iframe {
	position:relative;
	top: -250px;
    width: 385px;
	margin: 0 0 -210px 40px;
	box-shadow:  0px 0px 10px #ffde00;
	background:#FFF;
	padding:5px;
	border:1px solid #fff600;
	}
/*------------iframe style---------------*/

div#con_right div#slide_panel_wrap di#slide_panel div#iframe iframe#childFrame body  {
	background:#309 !important;
	}
/*-------------------for IE start --------------------------*/
.ie8 .slide_panel a.open {
	background: url(../images/landing/ID_btn.png) no-repeat 50% 0;
    width: 282px;
    height: 265px;
    cursor: pointer;
    display: block;
    left: 480px;
    overflow: hidden;
    position: relative;
    text-indent: 100%;
    transition: all 1s ease 0s;
    white-space: nowrap;

	}
.ie8  .slide_panel a.open:hover {
	background:url(../images/landing/ID_btn_hover.png) no-repeat 50% 0;
}

.ie8 #con_right ul{
	width:260px;
	padding:0;
			position: relative;
			top: -55px;
			margin: 0 0 -60px;
		}

.ie9 #con_right ul li.home a:hover {
	background:#3CF;
	}


/*-----------------background---------------------*/
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
	}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
height: 770px;
  display:block;
  min-width: 1240px;
}

.stars {
  background:#080821 url(../images/landing/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(../images/landing/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(images/clouds.png) repeat top center;
    z-index:3;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}


/**/
a.sp_link{
	position: absolute;
	right: 0;
	bottom: 2rem;
	display: block;
	max-height: 277px;
	margin: auto;
}
a.sp_link:hover img{
	filter: brightness(130%);
	transform: translate3d(0, 1px, 0);
}


_:-ms-lang(x)::backdrop, #con_right ul {
	/* top: -270px; */
	top:-421px;
}