hr.sns {
  height: 2px;
  border: none;
  border-top: 2px #0000ff dashed; /* 境界線 */
  }

/* button */
.buttons{
    margin-bottom: 8px;
  }
  
  .button-container{
    margin-bottom: 8px;
  }
  
  .button-container:last-child{
    margin-bottom: 0;
  }
  
  .button-container .button{
    position: relative;
    display: block;
    color: #fff;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    line-height: 40px;
    padding-left: 40px;
    height: 40px;
    -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    border: none;
    overflow: hidden;
  }
  
  .button-container .button:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-size: 100%;
    background-image: url("./../images/icon_sns.png");
  }
  
  .button-container .button:after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    display: inline-block;
    width: 40px;
    height: 100%;
    border-right-style: solid;
    border-right-width: 1px;
  }
  
  /* tw */
  .btn-tw{
    background-color: #5AABF3;
  }
  
  .btn-tw:before{
    background-position: 0 0;
  }
  
  .btn-tw:after{
    border-color: #5099DB;
  }
  
  
  /* fb */
  .btn-fb{
    background-color: #39569C;
  }
  
  .btn-fb:before{
    background-position: 0 -40px;
  }
  
  
  .btn-fb:after{
    border-color: #334D8C;
  }
  
  /* google */
  .button-container .btn-google{
    background-color: #4285f4;
    border: #4285f4 solid 1px;
  }
  
  .button-container .btn-google:before{
    top: 50%;
    left: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-image: url(./../images/icon_google.png);
    background-repeat: no-repeat;
    z-index: 1;
  }
  
  .button-container .btn-google:after{
    background-color: #fff;
  }
  
  /* yahoo */
  
  .button-container .btn-yahoo{
    background-color: #ff0029;
    border: #ff0029 solid 1px;
  }
  
  .button-container .btn-yahoo:before{
    top: 50%;
    left: 7px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 27px;
    height: 13px;
    background-image: url(https://s.yimg.jp/images/login/btn/ymark_r_13_2x.png);
    background-repeat: no-repeat;
    z-index: 1;
  }
  
  .button-container .btn-yahoo:after{
    background-color: #fff;
  }
  
  /* line */
  .btn-line{
    background-color: #37C600;
  }
  
  .btn-line:before{
    background-position: 0 -120px;
  }
  
  .btn-line:after{
    border-color: #30B200;
  }
  
  /* nintendo account */
  .button-container .btn-nintendo-account {
    padding-left: 0;
    background-color: #e60012;
  }
  
  .button-container .btn-nintendo-account::after {
    display: none;
  }
  
  .button-container .btn-nintendo-account::before {
    display: none;
  }
  
  /* nnid */
  .btn-nnid{
    background-color: #ff7c00;
  }
  
  .btn-nnid:before{
    background-position: 0 -80px;
  }
  
  
  .btn-nnid:after{
    border-color: #E17100;
  }