@charset "utf-8";


* {
	margin:0;
	padding:0;
	/*font-family:'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',sans-serif;*/
	font-family:'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',meiryo,'ＭＳ Ｐゴシック',sans-serif;
	/*font-family:arial,helvetica,clean,sans-serif;*/
	color: #FFF;
}


body {
	background: #000;
	background-image: url("../images/bg_yamada.jpg");
	background-repeat: repeat;
	background-position: top center;
	background-attachment: fixed;
}

/*div#wrapper {
	background:url(../images/top_image.jpg) center top no-repeat;
}*/

b {
	font-size:28px;
}

dd {
	font-weight: bold;
}

p {
	color:#FFF;
	font-weight:bold;
}

div#header {
	position:relative;
	width:774px;
	/*height:750px;*/
	height:880px;
	margin: auto;
}


/* keyframes */

@keyframes headerchangeMainImage {
  0% { /*28秒中0%地点で透明度0*/
    opacity: 0;
  }

  30% { /*28秒中5%地点で透明度1*/
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}

.AnimationHeader {
  position: relative;
  margin: 0px auto 0px;
  width: 740px;
  /*height: 564px;*/
}

.AnimationHeader__img {
  display: block;
  margin: auto;
  line-height: 0;
  display: block;
}

.AnimationHeader__img.no1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: headerchangeMainImage;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

.AnimationHeader__img.no2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: headerchangeMainImage;
  animation-delay: 4s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}



.SubTopArea {
	margin-top: 10px;
	width:774px;
	height:216px;
	position:absolute;
	left:0px;
	top:640px;
	/*background-color:#F00;*/
	font-weight: bold;
}

.SubToptext {
	position:absolute;
	width:740px;
	left:20px;
	top:125px;
	text-align: center;
	/*font-size:25px;*/
}

.SubToptext b {
	font-size:25px;
}

.SubToptext p {
  font-size:15px;
  /*color: #F00;*/
}

.url img:hover {
    -webkit-transition: all 0.2s;
}

.url img:hover {
    transform: scale(1.03); /*画像の拡大/縮小(xy)*/
    /*opacity:0.9;/*透明度*/*/
}





/*.SubTopArea a {
	position:absolute;
	left:140px;
	top:10px;
}*/


div#Countdown {
	position:relative;
	margin:35px auto 30px;
	text-align: center;
	/*background-color:#F00;*/
}

.history {
  margin: auto;
  width: 500px;
text-align: center;
font-weight:bold;
}

.history p {
text-align: left;
}

.url {
	width: 600px;
	position:absolute;
	left:85px;
	top:20px;
}

.SubTopArea dd {
	/*font-size:18px;*/
	font-size:24px;
	color:#FFF;
	font-weight:bold;
	position:absolute;
	/*left:165px;*/
	left:170px;
	top:140px;
	line-height:120%;
	/*top:60px;*/
}

/* Firefox */
@-moz-document url-prefix() {
	.SubTopArea dd {
		/*font-size:18px;*/
		font-size:23px;
		color:#FFF;
		font-weight:bold;
		position:absolute;
		/*left:165px;*/
		left:110px;
		top:140px;
		line-height:120%;
		/*top:60px;*/
	}
}

.SubTopArea h3 {
	position:absolute;
	left:130px;
	/*top:50px;*/
	top:110px;
}

div#header h1 {
	padding-top:40px;
	position:static;
	text-align:center;
}

div#header p.copy01 {
	position:absolute;
	right:63px;
	top:214px;
}

div#header p.copy02 {
	position:absolute;
	left:92px;
	top:240px;
}

div#main {
	margin:0 auto;
	width:774px;
}

.btnArea {
/*width: 900px;*/
  position:absolute;
  left:20px;
  top:0px;
}



div.shareArea {
	display:block;
	position:absolute;
	right:0;
	top:20px;
}

div.shareArea ul {
}

div.shareArea li.twitterTool {
	float:left;
	margin-right:10px;
}

div.shareArea li.facebookTool {
	float:left;
}

div#movieArea {
	width:740px;
	padding-top:10px;
	margin-bottom: 5px;
	margin: auto;
}

div#movieSArea ul {
	width:740px;
}

div#movieSArea li {
	margin-top:60px;
	width:350px;
	float:left;
}

div#movieSArea li.right {
	width:350px;
	float:right;
}

div#movieSArea li p img {
	margin:65px 0 0 80px;
}

div#movieArea h2,
div#movieSArea h2 {
	margin: 10px 0px 2px 0px;
}
.box_wrap_movie {
    width:740px;
    height: 175px;
    /*margin-top:3px;*/
    /*background-color:#FF0;*/
}



.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.box_wrap_movie iframe{
	position: relative;
	/*top: 3px;*/
	left: 0;

}


div#StoryArea {
  position:relative;
  /*margin:20px auto;*/
  width:774px;
  height: 221px;
  /*background:#ffebcd;*/
  margin:5px auto 10px;
}


.storytext  {
  position: absolute;
  top: 80px;
  left: 100px;
  font-size: 14px;
  font-weight: bold;
  /*letter-spacing: 3px;*/
  text-shadow: 1px 1px 0 #009999,
               -1px 1px 0 #009999,
               1px -1px 0 #009999,
               -1px -1px 0 #009999;
}


.SystemArea {
  position:relative;
  width:770px;
  margin:auto;
}

div#SystemArea {
  position:relative;
  /*margin:20px auto;*/
  width:774px;
  height: 221px;
  /*background:#ffebcd;*/
  margin:5px auto 10px;
}

.characterbutton {
	position: absolute;
	top: 50px;
 	left: 470px;

}

.characterbutton img:hover {
    -webkit-transition: all 0.2s;
}

.characterbutton img:hover {
    transform: scale(1.03); /*画像の拡大/縮小(xy)*/
    /*opacity:0.9;/*透明度*/*/
}



div#SystemArea dl {
	position: absolute;
	top: 80px;
 	left: 100px;
 	font-size:14px;
 	line-height:180%;
 	width:600px;
 	white-space: nowrap;
 	color: #FFF;
 	font-weight:bold;
  text-shadow: 1px 1px 0 #009999,
               -1px 1px 0 #009999,
               1px -1px 0 #009999,
               -1px -1px 0 #009999;

}


div#collaboration {
	position:relative;
	margin:auto;
	width:770px;
}

div#collaboration dl {
	position: absolute;
	top: 40px;
 	left: 220px;
 	font-size:16px;
 	line-height:180%;
 	width:600px;
 	white-space: nowrap;
}

div#collaboration img:hover {
    -webkit-transition: all 0.2s;
}

div#collaboration img:hover {
    transform: scale(1.01); /*画像の拡大/縮小(xy)*/
    /*opacity:0.9;/*透明度*/*/
}


div.contArea {
	padding-top:40px;
}

div.contArea dl {
	padding-top:20px;
}

div.contArea ul.anime li {
	float:left;
}

div.contArea#story dt.thumb {
	width:305px;
	float:left;
}

div.contArea#story dd.txt {
	font-size:117%;
	width:435px;
	float:left;
}

div.contArea#story ul.anime { margin-left:150px;}
div.contArea#story ul.anime li.left img { margin-top:54px;}
div.contArea#story ul.anime li.right img { margin-top:10px;}

div.contArea#howtoplay dt.thumb {
	width:305px;
	float:right;
	text-align:right;
}

div.contArea#howtoplay dd.txt {
	font-size:117%;
	width:435px;
	float:left;
}

div.contArea#howtoplay ul.anime { margin-left:40px; padding-top:10px;}
div.contArea#howtoplay ul.anime li.left img { margin-top:10px;}

div.contArea#sound {
}

div.staff {
	width:384px;
position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 20px;
  left: 60px;
}

div.staff dl {
	padding-top:0;
	float:left;
}

div.staff dl.left { width:170px;}
div.staff dl.right { width:170px;}

div.contArea#sound div.staff dt { height:164px;}
div.contArea#sound div.staff dt img { margin-top:14px;}
div.contArea#sound div.staff dd.name { height:46px;}
div.box_music_right div.staff dd.txt {
	margin-left:15px;
	width:170px;
	font-size:117%;
}

div.contArea#sound div.staff dl.right dt img { margin-top:14px;}
div.contArea#sound div.staff dl.left dd.name { margin-left:10px;}
div.box_music_right div.staff dl.right dd.name { margin-left:45px;}





div#nzArea {
	margin:0px auto 5px;
	width:740px;
}

div#nzArea div.tit {
	padding-left:68px;
	height:82px;
	background:url(../images/bg_nozokimi.jpg) left top no-repeat;
}

div#nzArea div.tit h3 {
	padding-top:8px;
}

div#nzArea div.tit p {
	padding-top:14px;
}

/*div#nzArea p.bn {
	margin-top:10px;
}*/

div#infoTwArea {
	padding-top:40px;
}

div#infoArea {
	width:350px;
	float:left;
}

div#infoArea h3 {
	height:45px;
}

div#infoArea div.info {
	height:400px;
	overflow-y: auto;
}

div#infoArea div.info::-webkit-scrollbar{
	width:8px;
	background: #333333;
}

div#infoArea div.info::-webkit-scrollbar-thumb{
	background: #ffffff;
}

div#infoArea div.info dl {
	margin-right:10px;
	padding:10px 10px 10px 0;
	border-top:2px dotted #999;
}

div#infoArea div.info dt {
	color:#999;
}





div#specArea {
	position:relative;
	/*margin:20px auto;*/
	width:740px;
	height: 100px;
	/*background:#ffebcd;*/
	margin:5px auto 10px;
}

div#specArea h3 {
	height:40px;
	position: absolute;
	top: 10px;
 	left: 23px;
}

div#specArea p {
	position: absolute;
	top: 40px;
 	left: 44px;
 	font-size: 14px;
 	letter-spacing: 2px;
}

div#sh02.shareArea {
	position:static;
	margin-top:40px;
}

div#sh02.shareArea div.center {
	position:relative;
	overflow: hidden;
}

div#sh02.shareArea ul {
	position:relative;
	left: 50%;
	float: left;
}

div#sh02.shareArea li {
	position:relative;
	left: -50%;
	float: left;
}

div.footerInnerInner {
	margin: 0 auto;
	width:740px;
}

.box_wrap01 {
	margin:0 auto;
    width:750px;
    height:500px;
    /*border:1px solid #F00;*/
    /*background-color:#F0F;*/
    position: relative;
}

.box_wrap01 img:hover {
    -webkit-transition: all 0.2s;
}

.box_wrap01 img:hover {
    transform: scale(1.01); /*画像の拡大/縮小(xy)*/
    /*opacity:0.9;/*透明度*/*/
}


.box_wrap02 {
	margin:0 auto;
    width:740px;
    height:265px;
    position: relative;
    /*vertical-align:top;*/
    /*border:1px solid #F00;*/
     /*background-color:#F00;*/
}

.box_txt_right {
	margin:5px 5px 5px 5px;
	width:240px;
	height:240px;
	float:left;
	/*margin-left:8px;*/
	/*background:#ffebcd;*/
	position: relative;
    /*left:25px;*/
}


.box_txt_right dl {
	margin:15px 20px;
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 0;
  left: 0;

}

h3 {
	font-size:20px;
	font-weight:bold;
}


.box_txt_right h4 {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 130px;
  left: 0px;

}



.box_txt_left {
	margin:5px 5px 5px 0px;
	/*float:right;*/
	width:277px;
	height:255px;
	float:left;
	/*margin-left:8px;*/
	/*background:#ffebcd;*/
	position: relative;
    /*left:25px;*/
}

.soundsource1 {

	width:256px;
	height:30px;
 	color: white;
  	position: absolute;
 	top: 0px;
 	left: 60px;
/*background:#fff;*/
}

.soundsource2 {

	width:256px;
	height:30px;
  color: white;
  position: absolute;
  top: 0px;
  left: 420px;
	/*background:#ffebcd;*/

}

/* Firefox */
@-moz-document url-prefix() {
	.box_music_left dd {
		/*font-size:18px;*/
		font-size:10px;
	}
}

.box_txt_left dl {
	margin:15px 20px;
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 0;
  left: 0;

}


.box_ss_right {
	margin:5px 0px 5px 5px;
    color: #FFF;
    width:453px;
    height:255px;
    margin-left:0px;
    float:right;
    /*background-color:#FF0;*/
    position: relative;
    /*left:18px;*/
}



.box_ss_left {
	margin:5px 5px 5px 5px;
    color: #FFF;
    width:240px;
    height:490px;
    float:left;
    position: relative;
    /*left:18px;*/
    /*background-color:#F00;*/
}

.box_music_right {
    color: #FFF;
    width:453px;
    height:255px;
  position: absolute;/*絶対配置*/
  /*color: white;*/
  top: 5px;
  left: 287px;
      /*background-color:#F00;*/
}

.box_music_left {
	margin: 10px auto;
    color: #FFF;
    width:740px;
    height:70px;
	position:relative;
	      /*background-color:#F00;*/
}

.box_music_left h3 {
	font-size:20px;
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 0;
  left: 90px;

}

.box_music_left dt {
  position: absolute;
  color: white;
  top: 20px;
  left: 0px;

}


/* Edge */
_:-ms-lang(x)::backdrop, 
	.OnionLink {
		width:750px;
		margin: 0px auto 10px;
		border-top: dotted 2px;
	}


.OnionLink img {
	margin-top:20px;
}

/* keyframes */

@keyframes changeMainImage {
  0% { /*28秒中0%地点で透明度0*/
    opacity: 0;
  }

  1.8% { /*28秒中5%地点で透明度1*/
    opacity: 1;
  }
  8.3% {
    opacity: 1;
  }
  11.9% {
    opacity: 0.3;
  }
  13% {
    opacity: 0.1;
  }
  14% {
    opacity: 0;
  }
}

@keyframes changeMainImageLast {

  0% {
    opacity: 0;
  }
  1.8% {
    opacity: 1;
  }
  8.3% {
    opacity: 1;
  }
  11% {
    opacity: 0;
  }
  14.4% {
    opacity: 0;
  }
}

.Animation {
  position: relative;
  margin: 0px auto 10px;
  width: 740px;
  height: 416px;
}

.toSSpage {
	margin: 0px auto 10px;
	width: 740px;
	text-align: right;
}

.Animation__img {
  display: block;
  margin: auto;
  line-height: 0;
  display: block;
}
.Animation__img.no1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}
.Animation__img.no2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 3.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}
.Animation__img.no3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;

  animation-name: changeMainImage;
  animation-delay: 7.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}
.Animation__img.no4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 11.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

.Animation__img.no5 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 15.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

.Animation__img.no6 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 19.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

.Animation__img.no7 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 23.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}



.Animation__img.no8 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 27.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

.Animation__img.no9 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 31.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

.Animation__img.no10 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 35.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}


.Animation__img.no11 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 39.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

.Animation__img.no12 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImageLast;
  animation-delay: 43.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

/*.Animation__img.no13 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 47.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}*/

/*.Animation__img.no14 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 51.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

.Animation__img.no15 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 55.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}

.Animation__img.no16 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImageLast;
  animation-delay: 59.5s;
  animation-duration: 48s;
  animation-iteration-count: infinite;
}*/

div#OnionLink {
	/*margin-top:1000px;*/
	position:relative;
	width:740px;
	padding-bottom: 150px;
}

div.TwitterArea {
	margin:4px auto 20px;
    width:325px;
    height:24px;
    position: relative;
    /*background-color:#F00;*/
}

.twitterTool02 {
    color: #FFF;
    width:75px;
    margin:５px;
    float:left;
  position: absolute;
  top: 5px;
  left: 40px;
    /*left:18px;*/
    /*background-color:#F00;*/
}

div#hashtagArea {
	width:250px;
	float:right;
	 position: absolute;
  top: 0px;
  left: 120px;
	/*background-color:#F00;*/
}

.txt {
	margin:8px;
}

.box_shokai {
	float:left;
	margin:0px 2px 0px 0px;
	width:244px;
	height: 175px;
}

.lang_btn {
	float:left;
	position: absolute;
	top: 10px;
	left: 10px;
	/*background-color:#F00;*/
}

.GoodsArea {
	width:740px;
	height:365px;
	margin: 20px auto 20px;
	/*background-color:#FF0;*/
}


.box_wrap_Goods {
	float:left;
	width:370px;
	height: 365px;
	/*background-color:#F00;*/
}

.box_wrap_Links {
	float:right;
	text-align:right;
	width:370px;
	height: 285px;
	margin-top: 15px;
	/*background-color:#F00;*/
}

.box_wrap_Links img {
	margin: 7px 0 6px 0;
}

.discordArea {
	width:740px;
	/*height: 400px;*/
	margin:auto;
  margin-bottom: 5px;
	/*background-color:#F00;*/
  font-weight: bold;
}


.OnionLink {
	width:740px;
	/*height: 400px;*/
	margin: 0px auto 10px;
	/*background-color:#F00;*/
	 border-top: dotted 2px;
}

.OnionLink img {
	margin-top:20px;
}

.LinkArea img:hover {
    -webkit-transition: all 0.2s;
}

.LinkArea img:hover {
    transform: scale(1.03); /*画像の拡大/縮小(xy)*/
    /*opacity:0.9;/*透明度*/*/
}

div#EventArea {
	width:740px;
	margin:auto;
}

div#EventArea dd {
	font-size: 17px;
	text-align:center;
}



/* @end */