@charset "UTF-8";

/* =========================================================
TZ / TOP
=========================================================== */

.p-main__tz{
position:relative;
margin:0 auto;
height:800px;
display:block;
}
.p-main-logo{
position:absolute;
top:20px;
left:115px;
width:560px;
height:240px;
z-index:5;
opacity:0;
}
.p-famista__main{
position:absolute;
bottom:0;
right:-10px;
width:800px;
height:780px;
}
.p-famista__main img{
width:100%;
height:auto;
display:block;
}

.p-catch{
position:absolute;
top:340px;
left:110px;
width:400px;
height:120px;
background:url(../../../img/top/bg_catch.png) no-repeat center top;
z-index:5;
opacity:0;
}

.p-movie1{
position:absolute;
bottom:15px;
left:110px;
width:150px;
height:100px;
}
.p-movie3{
position:absolute;
bottom:15px;
left:270px;
width:150px;
height:100px;
}
.p-movie2{
position:absolute;
bottom:15px;
left:430px;
width:150px;
height:100px;
}
.p-potal{
position:absolute;
bottom:15px;
left:145px;
width:240px;
height:160px;
}
.p-ubsf{
position:absolute;
bottom:15px;
left:110px;
width:470px;
height:96px;
}
.p-collabo{
position:absolute;
bottom:10px;
left:598px;
width:165px;
height:165px;
}

.p-movie1 img,
.p-movie2 img,
.p-movie3 img,
.p-collabo img,
.p-potal img{
width:100%;
height:auto;
display:block;
}

.p-no02{
position:absolute;
top:0;
left:0;
width:140px;
height:140px;
z-index:50;
}

/* =========================================================
Spec
=========================================================== */

.p-spec__main{
position:relative;
margin:0 60px 20px;
}
.p-spec1{
position:relative;
width:400px;
height:670px;
float:left;
opacity:0;
}
.p-spec2{
position:relative;
width:660px;
height:670px;
float:right;
opacity:0;
}
.p-spec3{
position:relative;
margin:0 auto;
width:1080px;
height:60px;
clear:both;
opacity:0;
}
.p-spec5{
position:relative;
margin:0 auto 10px;
height:105px;
text-align:center;
clear:both;
opacity:0;
}
.p-spec5 img{
margin:0 4px;
height:105px;
}

/* =========================================================
flow
=========================================================== */

.p-flow__main{
position:relative;
margin:0 auto 20px;
width:1000px;
height:800px;
background:url(../../../img/flow/flow1.png) no-repeat center top;
}
.p-flow1{
position:absolute;
top:30px;
left:0;
width:1000px;
height:800px;
background:url(../../../img/flow/flow2.png) no-repeat center top;
opacity:0;
}
.p-flow2{
position:absolute;
top:0;
left:0;
width:1000px;
height:800px;
background:url(../../../img/flow/flow3.png) no-repeat center top;
opacity:0;
}

/* =========================================================
howto
=========================================================== */

.p-howto__main{
position:relative;
margin:0 auto 10px;
width:1000px;
height:920px;
background:url(../../../img/howto/howto1.png) no-repeat right top;
opacity:0;
}
.p-howto1{
position:absolute;
top:50px;
left:0;
width:300px;
height:820px;
background:url(../../../img/howto/howto2.png) no-repeat center top;
opacity:0;
}

/* =========================================================
action
=========================================================== */

.p-action__main{
position:relative;
margin:0 auto 10px;
width:1030px;
height:850px;
background:url(../../../img/action/action2.png) no-repeat left bottom;
opacity:0;
}
.p-action1{
position:absolute;
top:0px;
left:0px;
width:690px;
height:70px;
background:url(../../../img/action/action1.png) no-repeat center top;
opacity:0;
}
.p-action2{
position:absolute;
top:71px;
right:0px;
width:410px;
height:780px;
background:url(../../../img/action/action3.png) no-repeat center top;
opacity:0;
}

/* =========================================================
bonus
=========================================================== */

.p-bonus__main{
position:relative;
margin:0 auto 10px;
width:1000px;
height:920px;
background:url(../../../img/bonus/bonus1.png) no-repeat center top;
opacity:0;
overflow:hidden;
}
.p-bonus1{
position:relative;
margin:0 auto;
width:1000px;
height:920px;
background:url(../../../img/bonus/bonus2.png) no-repeat center top;
opacity:0;
}
.p-bonus2{
position:absolute;
top:20px;
left:0;
width:1000px;
height:920px;
background:url(../../../img/bonus/bonus3.png) no-repeat center top;
opacity:0;
}

/* =========================================================
reach
=========================================================== */

.p-reach__main{
position:relative;
margin:40px auto 5px;
width:1000px;
height:600px;
}
.p-reach__main2{
position:relative;
margin:40px auto 5px;
width:1000px;
height:1080px;
}
.p-reach1{
position:relative;
margin:0 auto;
width:1000px;
height:600px;
background:url(../../../img/reach/reach1.png) no-repeat center top;
opacity:0;
}
.p-reach2{
position:absolute;
top:0;
left:0;
width:1000px;
height:600px;
background:url(../../../img/reach/reach2.png) no-repeat center top;
opacity:0;
}
.p-reach3{
position:absolute;
top:20px;
left:0;
width:1000px;
height:600px;
background:url(../../../img/reach/reach3.png) no-repeat center top;
opacity:0;
}
.p-reach4{
position:absolute;
top:20px;
left:4px;
width:480px;
height:420px;
background:url(../../../img/reach/reach4.png) no-repeat center top;
opacity:0;
}
.p-reach5{
position:absolute;
top:158px;
left:4px;
width:480px;
height:70px;
background:url(../../../img/reach/reach5.png) no-repeat center top;
opacity:0;
}
.p-reach6{
position:absolute;
top:-107px;
left:410px;
width:580px;
height:120px;
background:url(../../../img/reach/reach6.png) no-repeat center top;
opacity:0;
}
.p-reach7{
position:relative;
margin:0 auto;
width:1000px;
height:1080px;
background:url(../../../img/reach/reach7.png) no-repeat center top;
opacity:0;
}
.p-reach8{
position:absolute;
top:0;
left:0;
width:1000px;
height:1080px;
background:url(../../../img/reach/reach8.png) no-repeat center top;
opacity:0;
}
.p-reach9{
position:absolute;
top:20px;
left:0;
width:1000px;
height:1080px;
background:url(../../../img/reach/reach9.png) no-repeat center top;
opacity:0;
}
.p-reach10{
position:absolute;
top:55px;
left:10px;
width:480px;
height:420px;
background:url(../../../img/reach/reach4.png) no-repeat center top;
opacity:0;
}
.p-reach11{
position:absolute;
top:-35px;
left:-25px;
width:480px;
height:70px;
background:url(../../../img/reach/reach5.png) no-repeat center top;
opacity:0;
}
.p-reach12{
position:absolute;
top:-107px;
left:440px;
width:580px;
height:120px;
background:url(../../../img/reach/reach6.png) no-repeat center top;
opacity:0;
}

/* =========================================================
action
=========================================================== */

.p-allstar__main{
position:relative;
margin:10px auto 15px;
width:900px;
height:829px;
background:url(../../../img/allstar/allstar1.png) no-repeat left bottom;
opacity:0;
}
.p-allstar1{
position:absolute;
top:0px;
left:0px;
width:900px;
height:829px;
background:url(../../../img/allstar/allstar2.png) no-repeat center top;
opacity:0;
}
.p-allstar2{
position:absolute;
top:0px;
left:0px;
width:900px;
height:829px;
background:url(../../../img/allstar/allstar3.png) no-repeat center top;
opacity:0;
}
.p-allstar3{
position:absolute;
top:0px;
left:20px;
width:900px;
height:829px;
background:url(../../../img/allstar/allstar4.png) no-repeat center top;
opacity:0;
}

/* =========================================================
Shop Search
=========================================================== */

.p-shop{
position:absolute;
top:30px;
right:140px;
width:50px;
height:50px;
z-index500;
opacity:0;
}
#p-shop-search{
position:relative;
padding:20px;
background:rgba(16,52,180,0.5);
border-radius:12px;
}
.p-shop-search__logo{
margin:0 auto;
width:500px;
height:220px;
}
.p-shop-search__form{
margin:0 auto;
width:360px;
line-height:1;
display:block;
}
.p-shop-search__select{
width:360px;
height:35px;
line-height:35px;
font-size:16px !important;
outline:none;
margin-bottom:25px;
}
#p-shop-search__btn{
margin:0 auto;
width:250px;
height:80px;
line-height:1;
display:block;
}
.p-shop img{
width:100%;
height:auto;
display:block;
}