@charset "utf-8";
/* CSS Document */



/* ログイン */
#dealing_login{width: 100%; background-color: #eee;}
.dealing_login > div{margin: 0 auto; background-color: #fff; border-radius: 10px;}
.dealing_login h2{background-color: #060; border-radius: 5px; color: #fff; text-align: center; margin: 0 auto;}
.login_txt{color: #060; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; text-align: center;}
.login_table > table{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.login03 input{background-color: #fff; border: 1px solid #ccc; border-radius: 77px; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; width: 154px; height: 154px; cursor: pointer; color: #000;}

@media screen and (min-width: 1001px) {
  .login_w70{display: none;}
  #dealing_login{padding: 80px 0;}
  .dealing_login{max-width: 1200px; min-width: 1000px; margin: 0 auto;}
  .dealing_login > div{width: 94%; padding: 20px 0 90px 0;}
  .dealing_login h2{font-size: 44px; width: 96%; padding: 15px 0;}
  .login_txt{font-size: 15px; margin: 20px 0 50px 0;}
  .login_wrap{width: 750px; margin: 0 auto;}
  .login_table{float: left; padding-top: 15px;}
  .login01{font-size: 24px; text-align: right; padding-right: 20px;}
  .login02 input{font-size: 18px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 400px;}
  .login03{float: right;}
  div{
    &.login03 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 24px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";  font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}

@media screen and (min-width: 701px) and ( max-width: 1000px) {
  .login_w100{display: none;}
  #dealing_login{padding: 60px 0;}
  .dealing_login > div{width: 90%; padding: 20px 0 60px 0;}
  .dealing_login h2{font-size: 36px; line-height: 130%; width: 96%; padding: 10px 0;}
  .login_txt{font-size: 14px; margin: 20px 0 40px 0;}
  .login_wrap{width: 90%; margin: 0 auto;}
  .login_table > table{width: 400px; margin: 0 auto;}
  .login01{font-size: 20px;}
  .login02 input{font-size: 16px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 400px;}
  .login03_w{width: 154px; margin: 40px auto 0 auto;}
  div{
    &.login03 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";  font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 700px) {
  .login_w100{display: none;}
  #dealing_login{padding: 60px 0;}
  .dealing_login > div{width: 90%; padding: 20px 0 60px 0;}
  .dealing_login h2{font-size: 36px; line-height: 130%; width: 96%; padding: 10px 0;}
  .login_txt{font-size: 14px; margin: 20px 0 40px 0;}
  .login_wrap{width: 90%; margin: 0 auto;}
  .login_table > table{width: 90%; margin: 0 auto;}
  .login01{font-size: 20px;}
  .login02 input{font-size: 16px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 100%;}
  .login03_w{width: 154px; margin: 40px auto 0 auto;}
  div{
    &.login03 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";  font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}





/* 会員登録 */
#dealing_member{width: 100%; background-color: #eee;}
.dealing_member > div{margin: 0 auto; background-color: #fff; border-radius: 10px;}
.dealing_member h3{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; line-height: 150%;}
.dealing_txt01, .dealing_txt02, .dealing_btn{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
.dealing_txt01{line-height: 160%;}
.dealing_btn{border: 1px solid #ccc; border-radius: 60px; display: block; line-height: 130%; text-align: center; padding: 30px 0; margin: 0 auto;}
.dealing_btn{background-color: #fff; color: #000; transition: .5s;}
.dealing_btn:hover{background-color: #000; color: #fff; transition: .5s;}
.dealing_txt02{color: #666; line-height: 160%;}

@media screen and (min-width: 1001px) {
  #dealing_member{padding-bottom: 80px;}
  .dealing_member{max-width: 1200px; min-width: 1000px; margin: 0 auto;}
  .dealing_member > div{width: 94%; padding: 65px 0;}
  .dealing_member_w70{display: none;}
  .dealing_member h3{font-size: 25px; text-align: center;}
  .dealing_txt01{font-size: 16px; text-align: center; width: 700px; margin: 30px auto 45px auto;}
  .dealing_btn{font-size: 24px; width: 650px;}
  .dealing_txt02{font-size: 16px; text-align: center; margin-top: 25px;}
}

@media screen and (min-width: 701px) and ( max-width: 1000px) {
  #dealing_member{padding-bottom: 60px;}
  .dealing_member > div{width: 90%; padding: 60px 0;}
  .dealing_member_w70{display: none;}
  .dealing_member h3{font-size: 25px; text-align: center;}
  .dealing_txt01{font-size: 16px; width: 90%; margin: 30px auto 45px auto;}
  .dealing_btn{font-size: 24px; width: 80%;}
  .dealing_txt02{font-size: 16px; width: 90%; margin: 25px auto 0 auto;}
}

@media screen and (max-width: 700px) {
  #dealing_member{padding-bottom: 60px;}
  .dealing_member > div{width: 90%; padding: 40px 0;}
  .dealing_member_w100{display: none;}
  .dealing_member h3{font-size: 20px; text-align: center;}
  .dealing_txt01{font-size: 15px; width: 90%; margin: 25px auto 40px auto;}
  .dealing_btn{font-size: 20px; width: 84%;}
  .dealing_txt02{font-size: 15px; width: 90%; margin: 20px auto 0 auto;}
}