@charset "UTF-8";

a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus { overflow: hidden; }
.clear { clear: both; }

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

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

.fear_result p.text01 {
    display: block;
    margin:0px;
    width:447px;
    height:173px;
    background-image:url(../img/fear_result/txt01.png);
    text-indent: -9999px;
    position: relative;
    top: 10px;
    left: -20px;
}

.fear_result .fear_result_img {
    position: absolute;
    top: 0px;
    left: 560px;
 }
.fear_result .text02 {
    width:130px;
    height:322px;
    background-image:url(../img/fear_result/txt02.png);
    text-indent: -9999px;
    position: relative;
    top: 34px;
    left: -15px;
}
.fear_result .text03 {
    display: block;
    margin:0px;
    width:792px;
    height:443px;
    background-image:url(../img/fear_result/txt03.png);
    position: relative;
    top: 54px;
    left: -12px;
    z-index: 200;
    text-indent: -9999px;
}
a.link01, a.link02, a.link03, a.link04, a.link05, a.link06, a.link07, a.link08, a.link09, a.link10 {
    display: block;
    width:125px;
    height:24px;
    background-image:url(../img/fear_result/btn_details.png);
    position: absolute;
    text-indent: -9999px;
}
a.link01:hover, a.link02:hover, a.link03:hover, a.link04:hover, a.link05:hover, a.link06:hover, a.link07:hover, a.link08:hover, a.link09:hover, a.link10:hover {
    background-position: 0 -24px;
}
a.link01 { top: 237px; left: 210px; }
a.link02 { top: 266px; left: 210px; }
a.link03 { top: 297px; left: 210px; }
a.link04 { top: 326px; left: 210px; }
a.link05 { top: 355px; left: 210px; }
a.link06 { top: 386px; left: 210px; }
a.link07 { top: 416px; left: 210px; }
a.link08 { top: 445px; left: 210px; }
a.link09 { top: 475px; left: 210px; }
a.link10 { top: 505px; left: 210px; }

/*恐怖体験の投稿内容*/
h2.name {
    font-weight: bold;
    font-size: 150%;
    text-shadow: 2px 2px 2px #a1987c;
    position: relative;
    top: 10px;
    left: 40px;
}
.experience {
    font-weight: bold;
    font-size: 150%;
    width: 700px;
    position: relative;
    top: 30px;
    left: 50px;
    text-shadow: 2px 2px 2px #a1987c;
    z-index: 10;
}
.contents_wrapper01, .contents_wrapper02, .contents_wrapper03, .contents_wrapper04, .contents_wrapper05, .contents_wrapper06, .contents_wrapper07, .contents_wrapper08, .contents_wrapper09, .contents_wrapper10 {
    width: 860px;
    padding-left:88px;
    margin: 0;
}
.contents_wrapper01 { height: 776px; }
.contents_wrapper02 { height: 703px; }
.contents_wrapper03 { height: 1963px; }/*1893*/
.contents_wrapper04 { height: 1405px; }
.contents_wrapper05 { height: 1333px; }/*1260*/
.contents_wrapper06 { height: 570px; }/*490*/
.contents_wrapper07 { height: 1473px; }
.contents_wrapper08 { height: 2103px; }/*2033*/
.contents_wrapper09 { height: 1196px; }
.contents_wrapper10 { height: 3433px; }/*3290*/

.fear_result2 .bottom {
    margin-top: -73px;
    z-index: 1;
}
/*base.css*/
body{
    margin:0;
    padding:0;  
    background-color:black;
    color: #03060e;
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS P Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,verdana,arial,clean,sans-serif;
}

#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;
}