@charset "shift-jis";
/* CSS Document */

#fixed_banner{
   width: 100%;
   height: 68px;
   background: rgba(0, 0, 0, 0.8);
   position: fixed;
   bottom:0;
   z-index: 1000;
   text-align: left;
}
#fixed_banner .live_banner{
width: 145px;
   transform: rotate(-5deg);
   position: absolute;
   left: 10%;
   top:-200%;
}
@media all and (-ms-high-contrast: none) {
 #fixed_banner .live_banner{
width: 145px;
   transform: rotate(-5deg);
   position: absolute;
   left: 10%;
   top:-280%;
}
}
#fixed_banner .live_banner img{
max-width: 100%;
}
#fixed_banner .live_banner:hover{
opacity: 0.9;
   transition: 0.5s;
}


#fixed_banner .big_p{
line-height: 34px;
}
.big_p span{
position: relative;
}
#fixed_banner .big_text{
   max-width:490px;
   width: 35%;
margin: 0px auto;
   vertical-align: middle;
   margin-left: 22%;
}
#fixed_banner:after,#fixed_banner .right_area:after{
content: "";
   display: block;
   clear: both;
}
#fixed_banner .right_area{
/*float: right;*/
   background: #000;
   position: relative;
   max-width: 510px;
   width: 38%;
   height: 68px;

/*   padding: 10px 15px;*/
   padding-left:0;
   box-sizing: border-box;
   position: absolute;
   right: 0;
   top: 0;
}
#fixed_banner .right_area:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 34px 37px 34px 0;
border-color: transparent #000 transparent transparent;
position: absolute;
   left: -37px;
   top: 0px;
}
/*
#fixed_banner .right_area:before{
content: "";
display: block;
background: url(images/left_triangle.png);
background-size: contain;
background-repeat: no-repeat;
width: 7.87%;
height: 100%;
position: absolute;
   left: -7.87%;
   top: 0px;
}
*/


#fixed_banner .right_area .small_p{
line-height: 34px;
   width: 33%;
   float: left;
}
#fixed_banner .right_area .small_text{
   width: 100%;
display: inline-block;
/*   margin: 2.12% 0;*/
   margin-left: 0%;
   vertical-align: middle;
   margin-left: 5%;
}
#fixed_banner .right_area .line_area{
   max-width: 158px;
   width: 33%;
   float: left;
/*   margin: 2.12% 0;*/
   margin-left: 5%;
   
}
#fixed_banner .right_area .line_area a{
display: block;
}
#fixed_banner .right_area .line_area .line_friend_img{
line-height: 34px;
}
#fixed_banner .right_area .line_area img{
   max-width: 100%;
   max-height: 49px;
   height: auto;
   vertical-align: middle;
}
#fixed_banner .right_area .line_area a:hover{
opacity: 0.8;
transition: 0.5s;
}


#close_banner_btn{
   margin-left: 10px;
   display: inline-block;
   width: 30px;
   height: 30px;
   background: #7d7d7d;
   color: #fff;
   font-size: 30px;
   line-height: 1;
   font-weight: bold;
   margin: 19px auto;
   margin-right: 19px;
   float: right;
   text-align: center;
}
#close_banner_btn:hover{
cursor: pointer;
opacity: 0.8;
transition: 0.5s;
}
#footer #pagetop {
       bottom: 10%;
}


@media screen and (min-width:1040px){
   #fixed_banner .right_area{
/*float: right;*/
   width: 470px;
}
   #fixed_banner .right_area .small_text{
    margin-top: -4%;
      margin-left: 10%;
}
   #fixed_banner .right_area .line_area{
   margin-left: 10%
   }
#fixed_banner .right_area .line_area a {
    display: block;
    margin-top: -4%;
}
}

@media screen and (min-width:1550px){
#fixed_banner{
   text-align: center;
}
   #fixed_banner .big_p{
   margin: 20 auto;
   }
#fixed_banner .big_text {
    margin-left: 0%;
}
   #fixed_banner .live_banner{
   width: 170px;
   transform: rotate(-5deg);
   position: absolute;
   left: -50%;
   top:-250%;
}
   

   
}
@media all and (-ms-high-contrast: none) and (min-width:1550px) {
 #fixed_banner .live_banner{
width: 170px;
   transform: rotate(-5deg);
   position: absolute;
   left: -50%;
   top:-333%;
}
}