@charset "utf-8";

#member{
   margin: 20px auto 0;
   max-width: 980px;
}
#member .member_inner{
   background: #ffffff;
}
#member .member_inner .member_header{
   position: relative;
   min-height: 204px;
}
#member .member_inner .member_header img{
   width: 100%;
   height: auto;
   vertical-align: bottom;
}
#member .member_inner .member_header .login_wrap{
   
}
#member .member_inner .member_header .login_wrap .member_in{
   
}
#member .member_inner .member_header .login_wrap .member_in > ul{
   list-style: none;
   display: block!important;
   margin: 0;
}
#member .member_inner .member_header .login_wrap .member_in > ul li{
   width: 40%;
   position: absolute;
   text-align: center;
   bottom: 30px;
}
#member .member_inner .member_header .login_wrap .member_in > ul li:nth-of-type(1){
   left: 35px;
}
#member .member_inner .member_header .login_wrap .member_in > ul li:nth-of-type(2){
   right: 35px;
}
#member .member_inner .member_header .login_wrap .member_in > ul li a{
   background: #ffffff;
   color: #333333;
   text-decoration: none;
   display: block;
   line-height: 38px;
   border: 5px solid #036EB8;
   border-radius: 35px;
   font-size: 21px;
   font-weight: bold;
   padding-left: 30px;
   position: relative;
}
#member .member_inner .member_header .login_wrap .member_in > ul li a:hover{
   opacity: 0.8;
}
#member .member_inner .member_header .login_wrap .member_in > ul li a.register_link{
   background: #FAEE00;
}
#member .member_inner .member_header .login_wrap .member_in > ul li a:before{
   content:"";
   position: absolute;
   top: 6px;
   left: 37px;
   width: 24px;
   height: 24px;
   border-radius: 200px;
   background: #333333;
}
#member .member_inner .member_header .login_wrap .member_in > ul li a:after{
   content: '';
   position: absolute;
   top: 11px;
   left: 45px;
   display: block;
   height: 0;
   width: 0;
   border-width: 7px 12px;
   border-color: transparent transparent transparent #ffffff;
   border-style: solid;
}
#member .member_inner .member_content{
   border: 25px solid #036EB8;
   border-radius: 10px;
   background-image: url(https://459x.com/storage/guide_img/kaiin_lp_content_bg2_1118.png), url(https://459x.com/storage/guide_img/kaiin_lp_content_bg_1118.png);
   background-size: 100% auto, auto 100%;
   background-position: bottom left, bottom left;
   background-repeat: no-repeat, repeat;
}
#member .member_inner .member_content .member_content_ttl{
   margin: 0 3px 10px;
}
#member .member_inner .member_content .member_content_ttl img{
   width: 100%;
   height: auto;
   vertical-align: bottom;
}
#member .member_inner .member_content > ul{
   padding: 0;
   list-style: none;
}
#member .member_inner .member_content > ul li{
   margin: 0 15px 20px 25px;
   display: flex;
   display: -webkit-flex;
   display: -ms-flex;
   flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   padding: 10px;
   background: #ffffff;
   border-radius: 10px;
   box-shadow: 0 3px 5px rgba( 17,17,17,0.5);
   position: relative;
}
#member .member_inner .member_content > ul li:before{
   content: "";
   position: absolute;
   top: -10px;
   left: -15px;
   width: 60px;
   height: 60px;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
}
#member .member_inner .member_content > ul li:nth-of-type(1):before{
   background-image: url(https://459x.com/storage/guide_img/kaiin_lp_tokuten1_icon_1118.png);
}
#member .member_inner .member_content > ul li:nth-of-type(2):before{
   background-image: url(https://459x.com/storage/guide_img/kaiin_lp_tokuten2_icon_1118.png);
}
#member .member_inner .member_content > ul li:nth-of-type(3):before{
   background-image: url(https://459x.com/storage/guide_img/kaiin_lp_tokuten3_icon_1118.png);
}
#member .member_inner .member_content > ul li:nth-of-type(4):before{
   background-image: url(https://459x.com/storage/guide_img/kaiin_lp_tokuten4_icon_1118.png);
}
#member .member_inner .member_content > ul li:nth-of-type(5):before{
   background-image: url(https://459x.com/storage/guide_img/kaiin_lp_tokuten5_icon_1118.png);
}
#member .member_inner .member_content > ul li:nth-of-type(6):before{
   background-image: url(https://459x.com/storage/guide_img/kaiin_lp_tokuten6_icon_1118.png);
}
#member .member_inner .member_content > ul li .image{
   width: 30%;
}
#member .member_inner .member_content > ul li .image img{
   max-width: 100%;
   height: auto;
   vertical-align: bottom;
}
#member .member_inner .member_content > ul li .text{
   width: 70%;
   padding-left: 15px;
}
#member .member_inner .member_content > ul li .text .main{
   font-size:26px;
   font-weight: bold;
   color: #46a4e6;
   margin-bottom: 5px;
   letter-spacing: -0.5px;
   line-height: 1.3;
}
#member .member_inner .member_content > ul li .text .main > span{
   font-weight: bold;
   color: #E7407C;
}
#member .member_inner .member_content > ul li .text .sub{
   font-size: 16px;
}
#member .member_inner .member_content > .member_content_gate{

}
#member .member_inner .member_content > .member_content_gate .member_content_gate_image{
   width: 94%;
   margin: 0 auto;
}
#member .member_inner .member_content > .member_content_gate .member_content_gate_image img{
   width: 100%;
   height: auto;
   vertical-align: bottom;
}
#member .member_inner .member_content > .member_content_gate .login_wrap{
   width: 48%;
   margin: -11% auto 4%;
}
#member .member_inner .member_content > .member_content_gate .login_wrap .member_in{
   
}
#member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul{
   list-style: none;
   display: block!important;
   padding: 0;
}
#member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li{
   width: 100%;
   text-align: center;
   margin-bottom: 10px;
}
#member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a{
   background: #ffffff;
   color: #333333;
   text-decoration: none;
   display: block;
   line-height: 38px;
   border: 5px solid #036EB8;
   border-radius: 35px;
   font-size: 21px;
   font-weight: bold;
   padding-left: 30px;
   position: relative;
}
#member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a:hover{
   opacity: 0.8;
}
#member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a.register_link{
   background: #FAEE00;
}
#member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a:before{
   content:"";
   position: absolute;
   top: 6px;
   left: 53px;
   width: 24px;
   height: 24px;
   border-radius: 200px;
   background: #333333;
}
#member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a:after{
   content: '';
   position: absolute;
   top: 11px;
   left: 61px;
   display: block;
   height: 0;
   width: 0;
   border-width: 7px 12px;
   border-color: transparent transparent transparent #ffffff;
   border-style: solid;
}


@media (max-width: 768px) {
   #member .member_inner .member_header .login_wrap .member_in > ul li{

   }
   #member .member_inner .member_header .login_wrap .member_in > ul li:nth-of-type(1){
       bottom: 15px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li:nth-of-type(2){
      bottom: 15px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li a{
      font-size: 16px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li a:before{
      top: 10px;
      left: 25px;
      width: 18px;
      height: 18px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li a:after{
      top: 14px;
      left: 31px;
      border-width: 5px 8px;
   }
   #member .member_inner .member_content > ul li .text .main{
      font-size: 21px;
   }
   #member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a{
      font-size: 16px;
   }
   #member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a:before{
      top: 9px;
      left: 31px;
      width: 18px;
      height: 18px;
   }
   #member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a:after{
      top: 13px;
      left: 37px;
      border-width: 5px 8px;
   }
}
@media (max-width: 576px) {
   #member .member_inner .member_content{
      border: 15px solid #036EB8;
   }
   #member .member_inner .member_content > ul li{
      display: block;
   }
   #member .member_inner .member_content > ul li .image{
      width: 100%;
      margin-bottom: 10px;
   }
   #member .member_inner .member_content > ul li .text{
      width: 100%;
      padding-left: 0;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li{
      bottom: 5px;
      width: 45%;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li:nth-of-type(1){
      left: 10px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li:nth-of-type(2){
      right: 10px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li a{
      border: 3px solid #036EB8;
      padding-left: 20px;
      line-height: 34px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li a{
      font-size: 14px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li a:before{
      top: 9px;
      left: -115px;
      right: 0;
      margin: auto;
      width: 16px;
      height: 16px;
   }
   #member .member_inner .member_header .login_wrap .member_in > ul li a:after{
      top: 12px;
      left: -106px;
      right: 0;
      margin: auto;
      border-width: 5px 7px;
   }
   #member .member_inner .member_content > ul li .text .main{
      font-size: 18px;
   }
   #member .member_inner .member_content > ul li .text .main br{
      display: none;
   }
   #member .member_inner .member_content > ul li .text .sub{
      font-size: 14px;
   }
   #member .member_inner .member_content > .member_content_gate .login_wrap{
      width: 70%;
      margin: -10% auto 4%;
   }
   #member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a{
      font-size: 16px;
   }
   #member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a:before{
      top: 10px;
      left: 25px;
      width: 18px;
      height: 18px;
   }
   #member .member_inner .member_content > .member_content_gate .login_wrap .member_in > ul li a:after{
      top: 14px;
      left: 31px;
      border-width: 5px 8px;
   }
}