@import url(https://fonts.googleapis.com/css?family=UnifrakturMaguntia&text=FfeaturesSstorySsystemGgalleryCcharactersTop);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display+SC&text=FfeaturesSstorySsystemGgalleryCcharactersTop);

/*----Ini----*/
*{
  box-sizing: border-box;
}

html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
html,body{height:100%;}
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; text-decoration:none;}

body,td,th { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 15px; color: #fff; line-height:1.8;}
body { background: #000; margin: 0; padding: 0; width:100%;}
main{ display:block; }


.clearfix:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/*.clearfix {
  min-height: 1px;
}*/

.sub{
	text-indent:-1em;
	margin-left:1em;
	font-size:80%;
}

.check_mark{
  display:block;
  width:80px;
  text-align:center;
  /*background-color:#bb0a33;
  border:1px #830b27 solid;*/
  color:#ff2658;
  text-shadow:0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;
  position:absolute;
  left:50%;
  margin-left:-40px;
  font-weight:bold;
}

/*---BASE----*/
body{
  font-size:16px;
}

#wrapper{
  min-width:1000px;
  min-height:100%;
  overflow: hidden;
  position: relative;
}

/*-----HEAD---------*/
header{
  background-image:url(../images/common/head_bg.jpg);
  background-repeat: repeat-x;
  width:100%;
  z-index:1001;
}

#header_body{
  width:1000px;
  margin:0 auto;
  position:relative;
}

#head_logo{
  /*position:absolute;
  top:0;
  left:0;*/
  z-index:1;
  margin-left:5px;
}
#social_buttons{
  display:inline-block;
  margin-top:10px;
  margin-right:5px;
  width:40%;
  text-align:right;
  float:right;
}

#social_buttons img{
  width:24px;
  margin:0 1%;
  box-shadow:0 0 3px #000,0 0 3px #000,0 0 10px #000;
}


/*-----NAVIGATION---------*/
nav{
  margin-top:-40px;
  background-image: url(../images/common/menu_bg.jpg);
  background-repeat: repeat-x;
  height:52px;
}

#nav_body{
  width:1000px;
  margin:0 auto;
}

nav ul{
  width:80%;
  float:right;
  list-style-type: none;
}

nav ul li{
  display:inline-block;
  width:20%;
  text-align: center;
  font-size:160%;
  /*font-family: 'UnifrakturMaguntia', cursive,serif;*/
  font-family: 'Playfair Display SC',serif;
  text-shadow:0 0 8px rgba(255,0,0,0.8);
  height:47px;
  margin-top:2px;
  border:1px #400 solid;
  border-width:0 1px 0 0;
  position:relative;
  z-index:99;

  font-size:120%;
  text-transform:capitalize;
  padding-top:7px;
}

nav ul li:last-child{
  border-width:0;
}

nav ul li a{
  color:#FFF;
  position:relative;
  z-index:1;
}

nav ul li.current{
  background-image:url(../images/common/menu_active_bg.png);
  background-repeat: no-repeat;
  background-position:center center;
  background-size:100% 100px;
  color:#000;
  text-shadow:0 0 5px #8d042f,0 0 5px #8d042f,0 0 5px #8d042f,0 0 5px #a02,0 0 10px #a02,0 0 10px #a02;
}


nav ul li.inactive{
  opacity:0.3;
  color:#999;
}

#switch_mobmenu{
  float:right;
  margin-right:2%;
  border:1px rgba(255,255,255,0.3) solid;
  color:#FFF;
  margin-top:12px;
  padding:0 3%;
  display:none;
  cursor:pointer;
  position: relative;
  z-index:99;
}

#mobmenu{
  width:100%;
  position:fixed;
  top:128px;
  left:120%;
  z-index:99;
  background-color:rgba(0,0,0,0.9);
  padding:1.5%;
  border:1px #900 solid;
  border-image: url(../images/common/border_texture.gif) 4 round;
  border-width:0 0 3px 0;
  box-shadow:0 20px 50px #000;
}

#mobmenu table{
  border-collapse: collapse;
  width:100%;
  margin-bottom:7%;
}

#mobmenu .mobmenu_item{
  width:100%;
  padding:2% 5%;
  font-size:100%;
  font-family: 'Playfair Display SC',serif;
  color:rgba(255,255,255,0.3);
  letter-spacing:1px;
  text-align:center;
  text-transform:capitalize;
  width:50%;
}


#mobmenu tr td{
  border:1px #333 dotted;
  border-width:0 0 1px 0;
  position:relative;
}
/*#mobmenu tr:first-child td{
#mobmenu .mobmenu_item:first-child{
  border-width:0;
}*/

#mobmenu div.mobmenu_item{
  width:100%;
  font-size:120%;
}

#mobmenu .mobmenu_item a{
  color:#FFF;
  display: inline-block;
  width:100%;
  transform:scale(1,1.005);
  z-index:1;
}

#nav_body .check_mark{
  top:-22px;
  font-size:24px;
  font-family:sans-serif;
  transform:scale(1,0.7);
}
td .check_mark{
  font-size:16px;
  top:-10px;
}



/*-----CONTENTS---------*/
main{
  width:1000px;
  margin:0 auto;
}

main h1{
  float:right;
  width:50%;
  text-align:center;
  font-size:500%;
  text-shadow:0 0 5px #900,0 0 5px #900,0 0 20px #F05,0 0 30px #F05;
  color:rgba(255,255,255,0.7);
  font-family: 'UnifrakturMaguntia', cursive,serif;
  opacity:0.3;
}

#container{
  background-repeat: no-repeat;
  background-size:100% auto;
  background-position:center 0;
  background-attachment: fixed;
}


#content{
  border:3px #900 solid;
  border-width:3px 0 0 0;
  border-image: url(../images/common/border_texture.gif) 4 round;
  box-shadow:0 5px 10px rgba(155,0,0,0.6) inset;
  background-color:rgba(0,0,0,0.7);
  position:relative;
  /*overflow:hidden;*/
  width:110%;
  margin-left:-5%;

  opacity:0;
  margin-top:100px;
}

/*
#content #contents_bg_blood{
  position:absolute;
  top:-5%;
  left:3%;
  width:100%;
  height:75%;
  opacity:0;
}*/
#content:before{
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:3%;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  opacity:0.4;
  background-image:url(../images/common/contents_bg_blood.png);
  background-size:100% auto;
  background-repeat:no-repeat;
  z-index:1;
}


#content_body{
  width:92%;
  max-width:924px;
  margin:0.5% auto;
  margin-bottom:0;
  padding:2%;
  padding-bottom:15%;
  position:relative;
  z-index:2;
}


#popup_movie{
  width:100%;
  max-width:1000px;
  position:relative;
  padding-top:56.25%;
}

#popup_movie iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}


/*---Common Info---*/

#common_info{
  display:block;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  font-size:80%;
  color:#BBB;
}

#common_info #attention{
  width:94%;
  max-width:924px;
  margin:0 auto;
  padding:0;
}


#common_info p{
  text-align:center;
  margin-top:5%;
  margin-bottom:2%;
}

#common_info p img{
  width:25%;
  max-width:337px;
  margin:0 2%;
}

/*---SPEC---*/

#spec{
  background-color:rgba(197,41,80,0.7);
  border:1px #905 solid;
  border-width:1px 0;
  padding:1%;
}

#spec_body{
  width:1000px;
  margin:0 auto;
}

#spec_body img{
  width:21%;
  float:left;
}

#spec_body table{
  width:76%;
  float:right;
  border-collapse: collapse;
}

#spec_body table th,
#spec_body table td{
  text-align:left;
  color:#DDD;
  padding:0.5%;
  border:1px rgba(255,255,255,0.2) dotted;
  border-width:0 0 1px 0;
  font-size:90%;
}

#spec_body table th{
  width:90px;
}

#spec_body table tr:last-child th,
#spec_body table tr:last-child td{
  border-width:0;
}

.priceset{
  display:inline-block;
  margin-right:3%;
  /*width:45%;*/
}

#spec_body table td a{
  color:#FFF;
  display: inline-block;
  padding:0 0.5%;
  border:1px #FFF solid;
  background-color: rgba
}

/*---Footer--*/
#footer{
  background-image:url(../images/common/bg_bottom.jpg);
  background-repeat: no-repeat;
  background-size:110% 100%;
  background-position: center bottom;
  position:relative;
  z-index:1;
}
footer{
  padding-top: 2%;
  text-align:center;
}

footer a{
  color:#DDD;
  font-size:90%;
  margin:0 0.6%;
}

/*----Media Query----*/
@media screen and (max-width:768px){
  #wrapper{
    min-width:100%;
  }

  header{
    position:fixed;
    top:34px;
    left:0;
  }

  #social_buttons{
    margin-top:30px;
  }
  nav{
    margin-top:0;
  }

  nav ul{
    width:100%;
  }

  main,
  #header_body,
  #nav_body{
    width:100%;
  }
  #spec_body{
    width:90%;
  }

  nav ul li{
    font-size:150%;
    font-size:100%;
  }

  #content_body{
    padding-bottom:25%;
  }

  footer #copyright{
    width:90%;
    display: block;
    margin:0 auto;
  }

  .priceset{
    /*width:95%;*/
  }
  .priceset .pc_only{
    display:none;
  }

}

@media screen and (max-width:639px){
  .pc_only{
    display:none;
  }

  body{
    font-size:14px;
  }

  #head_logo{
    width:170px;
  }
  #social_buttons{
    margin-top:10px;
  }
  #social_buttons img{
    width:20px;
    margin:0 2%;
  }
  nav{
    margin-top:-40px;
  }
  nav ul{
    display:none;
  }
  #switch_mobmenu{
    display:inline-block;;
  }

  #common_info p img{
    width:45%;
  }

  #spec_body img{
    display:none;
  }
  #spec_body table{
    width:100%;
  }
  #spec_body table th,
  #spec_body table td{
    font-size:80%;
  }

}