@charset "utf-8";

/* ==================================================================================================================
   エイプリルフール2014
================================================================================================================== */

/* ------------------------------------------------------------------------------------------------------------------
   レイアウト
------------------------------------------------------------------------------------------------------------------ */
body{
background:#000 !important;
}

#aprilfool_2014{
width:100%;
background:url(../../../img/contents_pc/event/aprilfool_2014/bg_aprilfool_2014_01.jpg) repeat-x 0 0;
}

#container{
width:960px;
margin:0 auto;
}

/* ------------------------------------------------------------------------------------------------------------------
   ヘッダー
------------------------------------------------------------------------------------------------------------------ */
.af_header{
padding:5px 0 10px;
}

/* ニジナビロゴ
------------------------------------------------------------------- */
.nijinavi{
display:block;
width:213px;
height:0;
background:url(../../../img/contents_pc/event/aprilfool_2014/logo_nijinavi.png) no-repeat 0 0;
padding-top:46px;
overflow:hidden;
color:rgba(0,0,0,0);
float:left;
}

/* SNSボタン
------------------------------------------------------------------- */
.sns_btn{
float:right;
margin-top:15px;
}

.sns_btn li{
float:left;
margin-left:10px;
}

.sns_btn li iframe#twitter-widget-0{
width:90px !important;
}

/* ------------------------------------------------------------------------------------------------------------------
   メインエリア
------------------------------------------------------------------------------------------------------------------ */
.af_box_01,
.af_box_02,
.af_box_03{
width:100%;
text-align:center;
margin-bottom:40px;
}

.af_box_02{margin-bottom:70px;}
.af_box_03{margin-bottom:0;}


.af_box_02 img{margin-bottom:70px;}
.af_box_03 img{margin-bottom:70px;}


.mainlead_01,
.mainlead_02{
background:url(../../../img/contents_pc/event/aprilfool_2014/mainlead_aprilfool_2014_01.jpg) no-repeat 0 0;
width:100%;
height:0;
padding-top:50px;
overflow:hidden;
color:rgba(0,0,0,0);
margin-bottom:50px;
}

.mainlead_02{background-position:0 -50px;}


/* キャラクター紹介リンク
------------------------------------------------------------------- */
.character{
margin-bottom:30px;
}

.character li{
float:left;
width:240px;
height:660px;
}

.character li a{
display:block;
width:240px;
height:0;
padding-top:660px;
overflow:hidden;
color:rgba(0,0,0,0);
}

.character li.jkv a{background:url(../../../img/contents_pc/event/aprilfool_2014/mainpic_aprilfool_2014_01.jpg) no-repeat 0 0;}
.character li.bv a{background:url(../../../img/contents_pc/event/aprilfool_2014/mainpic_aprilfool_2014_01.jpg) no-repeat -240px 0;}
.character li.ts a{background:url(../../../img/contents_pc/event/aprilfool_2014/mainpic_aprilfool_2014_01.jpg) no-repeat -480px 0;}
.character li.hjp a{background:url(../../../img/contents_pc/event/aprilfool_2014/mainpic_aprilfool_2014_01.jpg) no-repeat -720px 0;}

.character li.jkv a:hover{background:url(../../../img/contents_pc/event/aprilfool_2014/mainpic_aprilfool_2014_01_01.jpg) no-repeat 0 0;}
.character li.bv a:hover{background:url(../../../img/contents_pc/event/aprilfool_2014/mainpic_aprilfool_2014_01_01.jpg) no-repeat -240px 0;}
.character li.ts a:hover{background:url(../../../img/contents_pc/event/aprilfool_2014/mainpic_aprilfool_2014_01_01.jpg) no-repeat -480px 0;}
.character li.hjp a:hover{background:url(../../../img/contents_pc/event/aprilfool_2014/mainpic_aprilfool_2014_01_01.jpg) no-repeat -720px 0;}


/* エントリーボタン
------------------------------------------------------------------- */
.entry_btn_01{
width:500px;
margin:-40px auto 0;
}

.entry_btn_01 li{
float:left;
margin:0 10px;
width:230px;
position:relative;
}

.entry_btn_01 li a{
display:block;
background:url(../../../img/contents_pc/event/aprilfool_2014/btn_aprilfool_2014_01.png) no-repeat 0 -84px;
width:230px;
height:84px;
}
.entry_btn_01 li.entry a{background-position:0 -252px;}

.entry_btn_01 li a i{
display:block;
background:url(../../../img/contents_pc/event/aprilfool_2014/btn_aprilfool_2014_01.png) no-repeat 0 0;
width:230px;
height:0;
padding-top:84px;
overflow:hidden;
color:rgba(0,0,0,0);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
opacity:1;
}
.entry_btn_01 li.entry a i{background-position:0 -168px;}

.entry_btn_01 li a:hover i{opacity:0;}

/* QRポップアップ
------------------------------------------------------------------- */
.qr_regist{
background:rgba(0,0,0,0.7);
width:226px;
height:226px;
padding:37px;
position:absolute;
top:-340px;
left:50%;
margin-left:-150px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

.qr_regist span.close{
display:block;
background:url(../../../img/contents_pc/event/aprilfool_2014/btn_aprilfool_2014_02.png) no-repeat 0 0;
width:50px;
height:0;
padding-top:50px;
overflow:hidden;
color:rgba(0,0,0,0);
cursor:pointer;
position:absolute;
right:-15px;
top:-15px;
}

.qr_regist span.close:hover{
background:url(../../../img/contents_pc/event/aprilfool_2014/btn_aprilfool_2014_02.png) no-repeat 0 -50px;
}

/* 企業情報ボタン
------------------------------------------------------------------- */
.entry_btn_02{
width:750px;
margin:0 auto 50px;
}

.entry_btn_02 li{
float:left;
margin:0 10px;
width:230px;
}

.entry_btn_02 li a,
.entry_btn_02 li p{
display:block;
background:url(../../../img/contents_pc/event/aprilfool_2014/btn_aprilfool_2014_01.png) no-repeat 0 -396px;
width:230px;
height:60px;
}
.entry_btn_02 li.twitter a{background-position:0 -516px;}
.entry_btn_02 li p{
background-position:0 -576px;
position:relative;
}


.entry_btn_02 li a i{
display:block;
background:url(../../../img/contents_pc/event/aprilfool_2014/btn_aprilfool_2014_01.png) no-repeat 0 -336px;
width:230px;
height:0;
padding-top:60px;
overflow:hidden;
color:rgba(0,0,0,0);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
opacity:1;
}
.entry_btn_02 li.twitter a i{background-position:0 -456px;}

.entry_btn_02 li a:hover i{opacity:0;}

.entry_btn_02 li p i{
display:block;
background:url(../../../img/contents_pc/event/aprilfool_2014/btn_aprilfool_2014_01.png) no-repeat 0 -636px;
width:94px;
height:0;
padding-top:24px;
overflow:hidden;
color:rgba(0,0,0,0);
position:absolute;
right:-10px;
top:-12px;
}