@charset "UTF-8";

/*------------------------------------------------------------------------------

共通

------------------------------------------------------------------------------*/



a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus {
	overflow: hidden;
}

.clear {
	clear: both;
}

.newsfear {
}

.newsfear h1 {
  margin:0px auto 10px;
  width:449px;
  line-height:47px;
  background-image:url(../img/fear/title.png);
    position: relative;
    top: 35px;
    text-indent: -9999px;
}

.newsfear_sub_cap01{
  margin:0px 0 14px 200px;
  width:376px;
  height:41px;
  background-image:url(../img/fear/sub_cap01.png);
    text-indent: -9999px;
}

.contents_wrapper {
 width: 860px;
    padding-left:88px;
    margin: 0;
    height: 915px;
}

.newsfear_text01 {
  display: block;
  margin:0px;
  width:541px;
  height:562px;
  background-image:url(../img/fear/txt01.png);
    float: left;
    text-indent: -9999px;
}

.contents_wrapper img {
    position: absolute;
    top: 45px;
    left: 560px;
    clear: both;
  }

.newsfear_text02 {
  display: block;
  margin:585px 0 0 0;
  width:815px;
  height:53px;
  background-image:url(../img/fear/txt02.png);
    text-indent: -9999px;
}

.newsfear_text03 {
  display: block;
  margin:0px;
  width:818px;
  height:91px;
  background-image:url(../img/fear/txt03.png);
    position: absolute;
    top: 855px;
    left: 90px;
    z-index: 200;
    text-indent: -9999px;
}

form {
  margin:26px 38px;
  width:705px;
  height:351px;
  background-image:url(../img/fear/entry.png);
}

.form table {
  position: relative;
    top: 60px;
    left: 20px;
}

.form .name {
 height: 35px;   
    width: 100px;
}

.form .mail {
 height: 35px;   
    width: 100px;
}

.form .comment2 {
 height: 35px;   
    width: 100px;
}

.form .comment {
 height: 100px;   
    width: 100px;
}

.form .caption {
  width:205px;
    text-indent: -9999px;
  }

textarea {
  position: relative;
    top: 5px;
width: 665px;
height: 9em;
    border: 1px solid #ef3036;
}



#text_form {
    width: 200px;
    height: 20px;
    border: 1px solid #ef3036;
}

input.submit-button {
    text-indent: -9999px;
    position: relative;
    top: 73px;
    left: 300px;
  /*background-image:url(../img/fear/btn_submit.png);*/
    width: 82px;
    height: 36px;
}

.form .complete {
	width: 100%;
	height: 100%;
}
.form .complete p {
	width: 100%;
	height: 100%;
    position: relative;
    top: 160px;
    left: 260px;
}
.fear_close {
    background-image:url(../img/fear/close_txt.png);
    width: 688px;
    height: 26px;
    margin: 80px auto 80px 45px;
}

/*base.css*/
body{
  margin:0;
  padding:0;  
  background-color:black;
    color: #ef3036;
}

#paper{
  width:962px;
  min-width:962px;
  margin:auto;
  position: relative;
  background-color:#000;
}

#paper .top{
  height:106px;
  background-image:url(../img/fear/frame_top.png);
  background-repeat:no-repeat;
  position: relative;
}

#paper .middle{
  height:1400px;
  margin-left:2px;
  background-image:url(../img/fear/frame_middle.png);
  background-repeat:repeat-y;
  position: relative;
}

#paper .bottom{
  width:962px;
  height:91px;
  background-image:url(../img/fear/frame_bottom.png);
  background-repeat:no-repeat;
  position: relative;
}



#header{
  width:100%;
  position:relative;
  color:white;
  background:url(../img/header_bg.png),#000;
  height:46px;
  background-repeat:repeat-x;
  z-index:500;
}

#header_area{
  width:962px;
  margin:auto;
}

#header_left{
  width:500px;
  float:left;
  margin-top:5px;
}

#header_left > div{
  float:left;
}

#header_right{
  text-align:right;
}


#sns_wrapper{
    float: right;
    margin-top: 10px;
    z-index: 102;
    right: 0px;
}

#sns_wrapper li{
    margin-right:5px;
    float:left;
}

#footer{
  width:100%;
  position:relative;
  height:250px;
  z-index:500;
 background:url(../img/footer_line.png),#000;
  background-position:0px 30px;
  background-repeat:repeat-x;
  margin : auto;
  padding:60px 0px;
}

#footer .systeminfo{
  width:962px;
  margin:auto;
  height:100%;
}
.dark{
    position:fixed;
    background-color:black;
    top:0;
    left:0;
    z-index:400;
    pointer-events: none;
}

.darkX{
    width:100%;
    height:100%;
}

.darkY{
    width:100%;
    height:100%;
}


#light{
    position:fixed;
    width:1246px;
    height:1211px;
    top:0;
    left:0;
    border:none;
    background:url(../img/light_bg.png) no-repeat;
    z-index:400;
    pointer-events: none;
}

#light2{
    position:fixed;
    width:100%;
    height:1200px;
    top:0;
    left:0;
    border:none;
    background:black;
    z-index:500;
    pointer-events: none;
    transition:opacity 0.64s;
}


#darkLayerTop{
  background:url(../img/light_bg.png);
}
#darkLayerBottom{
  background:url(../img/light_bg.png);
}
/*----- BGM -----*/
#volume{
  width:143px;
  height:22px;
  background-image:url(../img/bgm.png);
  background-repeat:no-repeat;
}

#volume_on{
  width:47px;
  height:22px;
  background-repeat:no-repeat;
  background-image:url(../img/bgm.png);
  background-position:-145px 0%;
  cursor:pointer;
}

#volume_on.active{
  background-image:url(../img/bgm.png);
  background-position:-145px -22px;
}

#volume_separate{
  width:15px;
  height:22px;
  background-repeat:no-repeat;
  background-image:url(../img/bgm.png);
  background-position:-191px 0%;
}

#volume_off{
  width:40px;
  height:22px;
  background-repeat:no-repeat;
  background-image:url(../img/bgm.png);
  background-position:-205px 0%;
  cursor:pointer;
}

#volume_off.active{
  background-image:url(../img/bgm.png);
  background-position:-205px -22px;
}


#to_pagetop{
  position:fixed;
  bottom:-250px;
  left:90%;
  width:79px;
  height:146px;
  #background-image:url(../img/btn_to_top.png);
  z-index:600;
  opacity:0;
  transition: all 0.7s ease-out;
}
#to_pagetop a{
  display:block;
  width:79px;
  height:146px;
  background-image:url(../img/btn_to_top.png);
  background-position:0px 0px;
  z-index:601;
}

#to_pagetop a:hover{
  background-position:-79px 0px;
}