@-webkit-keyframes fadein{
0%{opacity:0;transform:translate(0,20px);transition:1s;}
100%{opacity:1;transform: none;transition:0s;}
}

@keyframes fadein{
0%{opacity:0;transform:translate(0,20px);transition:1s;}
100%{opacity:1;transform: none;transition:0s;}
}

@-webkit-keyframes opacity{
0%{opacity:0;}
100%{opacity:1;}
}

@keyframes opacity{
0%{opacity:0;}
100%{opacity:1;}
}

/*---------------------------------------------
キービジュアル
---------------------------------------------*/
/* メイン背景 */
#main_bg{
position:absolute;
top:0;
left:0;
width:100%;
height:1642px;
z-index:-0;
transition:opacity 1s;
background:
url(../../../../images/main/top/bgbody_chara.png) top 70px center/1500px 1433px no-repeat,
url(../../../../images/main/top/bgbody.jpg) top center/1500px 1643px no-repeat;
min-width: 1015px;
}

/* メインキャラ wrapper */
.main_chara_wrapper{
  position: relative;
  overflow: hidden;
  width: 100%;
}


/* メインキャラ
.main_chara{
  position:absolute;
  display:block;
  z-index:999;
  background-repeat:no-repeat;
  background-position:top center;
  left:0;
  right:0;
  margin:auto;
}
 */

/* メインキャラ個別
#main_chara_table {
    background-image: url(../../../../images/main/top/chara_table.png);
    width: 678px;
    height: 1028px;
    z-index:20;
    top:460px;
}

#main_chara_lucifer {
    background-image: url(../../../../images/main/top/chara_lucifer.png);
    width: 487px;
    height: 1279px;
    z-index:19;
    top:200px;
    right:-50px;
}

#main_chara_leviathan {
    background-image: url(../../../../images/main/top/chara_leviathan.png);
    width: 404px;
    height: 668px;
    z-index:18;
    top:670px;
    left:-590px;
}

#main_chara_satan {
    background-image: url(../../../../images/main/top/chara_satan.png);
    width: 673px;
    height: 904px;
    z-index:17;
    top:530px;
    right:-610px;
}

#main_chara_asmodeus {
    background-image: url(../../../../images/main/top/chara_asmodeus.png);
    width: 528px;
    height: 609px;
    z-index:16;
    top:270px;
    left:-338px;
}

#main_chara_beelzebub {
    background-image: url(../../../../images/main/top/chara_beelzebub.png);
    width: 797px;
    height: 875px;
    z-index:15;
    top:240px;
    right:-625px;
}

#main_chara_belphegor {
    background-image: url(../../../../images/main/top/chara_belphegor.png);
    width: 632px;
    height: 971px;
    z-index:14;
    top:160px;
    left:-720px;
}

#main_chara_belial {
    background-image: url(../../../../images/main/top/chara_belial.png);
    width: 486px;
    height: 890px;
    z-index:13;
    top:70px;
    right:-685px;
}
 */

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

---------------------------------------------*/
body {
background:#000;
-webkit-font-feature-settings: 'palt';
        font-feature-settings: 'palt';
letter-spacing: 0.1em;
min-width:1015px;
}

#contents {
padding: 120px 0 0;
margin: 1000px auto 0px auto;
width: 100% !important;
}

/* フッター枠指定 */
#footer {
margin: 0px auto;
}


/*---------------------------------------------
各セクション共通
---------------------------------------------*/
.mainSection {
display: flex;
margin: 50px auto 0;
padding: 50px 0;
font-size: 36px;
justify-content: flex-start;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
overflow: hidden;
}

.mainSection p{
text-shadow:0 0 10px #000,0 0 10px #000;
}

.mainSection__inner{
z-index:2;
position: relative;
}

.mainSection__head{
margin-bottom:20px;
margin-top: 70px;
text-align: center;
  z-index: 1;
}

.bg_layer{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:-1;
pointer-events:none;
}


/*---------------------------------------------
ムービー再生
---------------------------------------------*/
#op_area{
position:fixed;
width:100%;
height:100%;
z-index:1000;
top:0px;
left:0px;
}

#op_area_bg{
position:fixed;
width:100%;
height:100%;
z-index:0;
top:0px;
left:0px;
background:#000;
filter:alpha(opacity=50);
opacity:0.8;
}

#op_area_bg a{
position:fixed;
display:block;
width:100%;
height:100%;
z-index:99;
}

#op_area_inner{
padding:0px;
margin:auto;
width:80%;
height:auto;
position:absolute;
z-index:98;
top: 0px;
bottom: 0px;
left: 0;
right: 0;
}

#op_area_inner .inner{
position: absolute;
padding-bottom: 56.3%;
padding-top: 0px;
height: 0;
top: 0px;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
}

#op_area_inner iframe{
padding:0% 0px 0px 0px;
width:100%; height:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
}

#layer {
width:100%;
height:auto;
min-height:20px;
margin:0px;
position:absolute;
top:-20px;
left:0px;
z-index:100;
}

#skip_bt{
text-align:right;
}