@charset "UTF-8";
/* ---------------------------------------
  main.head_image
-----------------------------------------*/
main.head_image::before {
  background: url(../img/join/img_header_join_002.png) no-repeat center/cover;
}
@media screen and (max-width: 767px) {
  main.head_image::before {
    background-image: url(../img/join/img_header_join_sp_002.png);
  }
}

/* ---------------------------------------
  #join
-----------------------------------------*/
#join .clm_join {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  #join .clm_join {
    margin-top: 12.2rem;
  }
}
#join .clm_join .ttl_join {
  width: 18rem;
  height: 5rem;
  border-radius: 2.5rem;
  margin: 0 auto;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  background-color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#join .clm_join .ttl_join.long {
  width: 22.2rem;
}
@media screen and (max-width: 767px) {
  #join .clm_join .ttl_join {
    font-size: 2.8rem;
    padding-bottom: 0;
  }
}
#join .clm_join .txt_join {
  font-size: 1.8rem;
  line-height: 1.7777777778;
  margin-top: 4.3rem;
  padding: 0 3.6rem;
}
@media screen and (max-width: 767px) {
  #join .clm_join .txt_join {
    font-size: 2.8rem;
    line-height: 2;
    margin-top: 4.3rem;
    padding: 0;
  }
}
#join .clm_join table {
  margin-top: 3.2rem;
}
@media screen and (max-width: 767px) {
  #join .clm_join table {
    margin-top: 17.6rem;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table thead {
    display: none;
  }
}
#join .clm_join table thead th {
  background: #a4a4a4;
  color: #fff;
  text-align: center;
  padding: 0.8rem;
}
#join .clm_join table thead th:nth-of-type(n+2) {
  border-left: solid 0.4rem #fff;
}
#join .clm_join table thead th:nth-of-type(1) {
  width: 10.6rem;
}
#join .clm_join table thead th:nth-of-type(2) {
  width: 50.2rem;
  border-left: solid 0.6rem #fff;
}
#join .clm_join table thead th:nth-of-type(3) {
  width: 12.5rem;
}
#join .clm_join table thead th:nth-of-type(4) {
  width: 12.5rem;
}
#join .clm_join table thead th:nth-of-type(5) {
  width: 22.3rem;
}
@media screen and (min-width: 768px) {
  #join .clm_join table tbody tr {
    border-top: solid 0.6rem #fff;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody tr:nth-of-type(n+2) {
    margin-top: 7.5rem;
    display: block;
  }
}
#join .clm_join table tbody th, #join .clm_join table tbody td {
  padding: 1.6rem;
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody th, #join .clm_join table tbody td {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody th::before, #join .clm_join table tbody td::before {
    width: 13.8rem;
    background-color: #a5a5a5;
    font-size: 2.8rem;
    font-weight: 600;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody th .inner, #join .clm_join table tbody td .inner {
    width: calc(100% - 13.8rem);
    padding: 1.6rem 2.5rem;
    border-left: solid 0.7rem #fff;
  }
}
#join .clm_join table tbody th {
  background-color: #000;
  font-size: 1.8rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  #join .clm_join table tbody th {
    text-align: center;
    color: #fff;
    border-right: solid 0.6rem #fff;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody th {
    background-color: #f6f6f6;
    font-size: 2.8rem;
    font-weight: 600;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody th::before {
    content: "種 別";
  }
}
#join .clm_join table tbody td {
  font-size: 1.6rem;
  background-color: #f6f6f6;
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td {
    font-size: 2.8rem;
    line-height: 1.4285714286;
    border-top: solid 1.1rem #fff;
  }
}
@media screen and (min-width: 768px) {
  #join .clm_join table tbody td.tac {
    text-align: center;
  }
}
#join .clm_join table tbody td.btn {
  padding: 0;
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td.btn {
    background-color: transparent;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td.btn .inner {
    padding: 0;
  }
}
#join .clm_join table tbody td.btn a {
  width: 100%;
  height: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  background-color: #33a2d8;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 2;
  overflow: hidden;
  padding-bottom: 2px;
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td.btn a {
    width: 32.3rem;
    height: 5.9rem;
    font-size: 2.8rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 2.2rem;
    padding-bottom: 0;
  }
}
#join .clm_join table tbody td.btn a::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #33a2d8;
}
#join .clm_join table tbody td.btn a .txt {
  position: relative;
  z-index: 1;
}
#join .clm_join table tbody td.btn a .icon {
  position: absolute;
  z-index: 1;
  right: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.3rem;
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td.btn a .icon {
    font-size: 2.7rem;
    right: 1.9rem;
  }
}
@media (any-hover: hover) {
  #join .clm_join table tbody td.btn a:hover {
    opacity: 1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  #join .clm_join table tbody td.btn a:hover::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 3rem solid #0b0e53;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}
@media screen and (min-width: 768px) {
  #join .clm_join table tbody td:nth-of-type(n+2) {
    border-left: solid 0.4rem #fff;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td:nth-of-type(n+2) {
    border-top: solid 1.1rem #fff;
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td:nth-of-type(1)::before {
    content: "会員資格";
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td:nth-of-type(2)::before {
    content: "入会金";
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td:nth-of-type(3)::before {
    content: "年会費";
  }
}
@media screen and (max-width: 767px) {
  #join .clm_join table tbody td:nth-of-type(4)::before {
    content: "申込書";
  }
}
#join .clm_join .detail_link {
  text-align: center;
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  #join .clm_join .detail_link {
    margin-top: 9.7rem;
  }
}
#join .clm_join .detail_link a {
  color: #33a2d8;
  font-size: 2rem;
  font-weight: 700;
  border-bottom: solid 3px #33a2d8;
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  #join .clm_join .detail_link a {
    padding: 0 4.3rem 2.2rem 4.3rem;
    font-size: 2.8rem;
  }
}