@charset "utf-8";
/* VOLKS officail _ adjust_members_ranktable css _ first media - PC (lastupdate _ 2020.12.08) */
.rank-table {
  width: 100%;
  margin: 4rem auto;
  background-size: auto auto;
  background-color: rgba(255, 255, 255, 1);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 0.5rem, rgba(230, 230, 230, 1) 0.5rem, rgba(230, 230, 230, 1) 1rem );
  border-collapse: separate;
  border-spacing: 0;
}
.rank-table th,
.rank-table td {
  line-height: 1.3;
  text-align: center;
  position: relative;
}
.rank-table th {
  padding: 1.5rem 0rem;
}
.rank-table td {
  padding: 1.5rem 0.5rem;
  background: #fff;
  position: relative;
  font-size: var(--fs-l);
  font-weight: bold;
  vertical-align: middle;
}
th.rank-table-sub::before,
.rank-table td:not(.rank-table-link)::before {
  content: "";
  width: 100%;
  height: 100%;
  border: 0.3rem solid #fff;
  border-top: none;
  border-bottom-width: 0.1rem;
  position: absolute;
  left: 0;
  top: 0;
}
/* rank type */
.rank-table__tr-type th,
th.rank-table-sub {
  padding: 0;
  font-weight: normal;
  vertical-align: bottom;
}
.rank-table__tr-type th {
  padding: 0 0.3rem 1rem;
  background: #fff;
}
.rank-table-type {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column-reverse;
}
.rank-table-type dt {
  padding: 1rem 0;
  font-size: var(--fs-l);
}
.rank-table-type dd {
  padding: 0 0.2rem 1rem;
  font-size: var(--fs-ml);
  line-height: 1.3;
  text-align: left;
  display: flex;
  align-items: flex-start;
}
/* rank type - design element */
.starburst {
  font-size: var(--fs-l);
  -webkit-transform: rotate(-70deg);
  -moz-transform: rotate(-70deg);
  rotation: -70deg;
  position: absolute;
  bottom:  2rem;
  left: 50%;
  margin-left: -3.5em;
  z-index: 1;
  -moz-transition: -moz-transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
}
.starburst span {
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  rotation: 22.5deg;
}
.starburst__text {
  height: 100%;
  transform: rotate(-7.5deg);
  display: flex;
  align-items: center;
}
.starburst,
.starburst span {
  display: block;
  width: 7em;
  height: 7em;
  background: #fdd100;
  line-height: 1.2;
}
/* rank division */
.rank-table th[colspan="4"],
.rank-table th[colspan="5"] {
  padding: 0;
  background: #fff;
  border-bottom: none;
  border-right: 0.2rem solid #fff;
  line-height: 1;
  font-size: var(--fs-xl);
}
.rank-table th[colspan="4"] > div,
.rank-table th[colspan="5"] > div {
  background: #f5f5f5;
  padding: 4rem 0 3rem 0;
}
.rank-table th[colspan="5"] > div {
  padding-left: calc(12% + 1rem);
}
/* rank notice */
.rank-table-notice {
  margin: 0 auto;
  color: #666;
  font-size: var(--fs-s);
  font-weight: normal;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.rank-table-notice > li {
  margin: 1em 0.5em 0;
}
/* rank type */
.rank-table__tr-type th.rank-table__th-type {
  padding: 0 0.5rem;
}
/* rank heading*/
.rank-table-head {
  background: #fff;
  border-left: 0.2rem solid #ccc;
  border-right: 0.2rem solid #ccc;
  line-height: 1.3;
  vertical-align: middle;
}
.rank-table-head:empty {
  background: #f5f5f5;
}
.rank-table-head__case {
  width: min(80%, 8rem);
  margin: 0.5rem auto 0;
  display: block;
}
.rank-table th.rank-table-head--top {
  border-top: 0.2rem solid #ccc;
}
.rank-table th.rank-table-head--bottom {
  border-bottom: 0.2rem solid #ccc;
}
.rank-table-head:not(.rank-table-head--bottom)::after {
  content: "";
  width: calc(100% + 0.4rem);
  height: 0;
  border-bottom: 0.2rem dotted #ccc;
  position: absolute;
  left: -0.2rem;
  bottom: -0.1rem;
}
/* rank point rate */
.rank-table-pointrate {
  font-size: var(--fs-xl);
}
.rank-table-pointrate li {
  padding: 1.5rem 0;
  line-height: 1.2;
}
.rank-table-pointrate__detail {
  color: #333;
  font-size: var(--fs-xxl);
}
.rank-table-pointrate__detail > b {
  font-size: 125%;
}
/* rank type color */
.rank-c-vp--bg {
  background: var(--c-ms-vp-bg);
  color: #fff;
}
.rank-c-vs--bg {
  background: var(--c-ms-vs-bg)
}
.rank-c-vip--bg {
  background: var(--c-ms-vip-bg);
  color: #fff;
}
.rank-c-gl--bg {
  background: var(--c-ms-gl-bg);
  color: #fff;
}
.rank-c-vp--txt {
  color: var(--c-ms-vp-txt);
}
.rank-c-vs--txt {
  color: var(--c-ms-vs-txt);
}
.rank-c-vip--txt {
  color: var(--c-ms-vip-txt);
}
.rank-c-gl--txt {
  color: var(--c-ms-gl-txt);
}
td.rank-table__td--vp {
  background: rgba(184,222,245,0.5);
}
td.rank-table__td--vs {
  background: rgba(255,242,127,0.8);
}
td.rank-table__td--vip {
  background: rgba(245,183,206,0.7);
}
td.rank-table__td--gl {
  background: rgba(155,213,215,0.7);
}
/* ic */
.rank-ic {
  margin-left: -1rem;
  position: relative;
}
.rank-ic > img {
  margin: 0 0.5rem 0 -0.5rem;
  position: relative;
  top: 0.5em;
}
.rank-ic-vipvisa {
  width: max(20%, 5rem);
  transform: rotate(-15deg);
}
.rank-ic-yen {
  padding: 0.4em 0.5em;
  background: #fff;
  border-radius: 10rem;
  border: 0.2rem solid #7e5c52;
  color: #7e5c52;
  font-size: var(--fs-s);
  line-height: 1;
  position: relative;
  top: -0.3rem;
}
.rank-ic-cc {
  background: #fff;
  border-radius: 0.1em;
  color: #7e5c52;
  font-size: 150%;
  line-height: 0.8;
  position: relative;
  top: 0.1em;
}
.rank-ic-world {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 0.5rem 0 0;
  float: left;
  fill: rgba(0,158,167,1);
}
/* rank features  */
.rank-features {
  padding: 1rem 0.5rem;
  background: rgba(255,255,255,0.9);
  border-radius: 1rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.rank-features ~ .rank-features {
  margin-top: -0.8em;
}
.rank-features-na {
  width: 10%;
  height: 0.2rem;
  background: #aaa;
  display: inline-block;
}
.features-jp,
.features-check-pnk,
.features-check-blu {
  box-shadow: var(--bs-cmn);
  color: #000;
}
.features-check-pnk {
  color: #e93179;
}
.features-check-blu {
  color: #0599d5;
}
.features-os {
  background: rgba(0,158,167,0.8);
  color: #fff;
}
.features-vp {
  background: rgba(69,134,222,0.8);
  color: #fff;
  font-size: var(--fs-m);
  font-weight: normal;
}
.features-heidden {
  display: none;
}
.features-connect {
  left: 0.5rem;
}
.connect-td1 {
  width: calc(100% - 1rem);
  margin: auto;
}
.connect-td2 {
  width: calc(200% - 0rem);
}
.connect-td3 {
  width: calc(300% + 1rem);
}
.connect-td4 {
  width: calc(400% + 1rem);
}
.features-gl--sato {
  padding: 0 0 0 1em;
  margin: 5rem 0 -1em;
  line-height: 1;
  text-align: left;
  text-indent: -1em;
  display: block;
  position: relative;
  z-index: 1;
}
/* member rank detail link */
.rank-table-link {
  background: #fff;
}
.rank-link-btn {
  padding: 1rem 0;
  background: url("/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png") 0 0 repeat , #fff;
  border: 0.2rem solid #fff;
  border-radius: 1rem;
  box-shadow: var(--bs-cmn);
  color: #fff;
  font-weight: normal;
  display: block;
  position: relative;
}
.rank-link-btn:hover {
  color: #fff;
  filter: opacity(0.8);
  text-decoration: none;
}
.rank-link-btn::after {
  content: "";
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-left-color: #fff;
  position: absolute;
  right: 0;
  top: calc(50% - 0.5em);
}
.rank-link-btn--vp {
  background-color: var(--c-ms-vp-bg);
}
.rank-link-btn--vs {
  background-color: var(--c-ms-vs-bg);
  color: #000;
}
.rank-link-btn--vip {
  background-color: var(--c-ms-vip-bg);
}
.rank-link-btn--gl {
  background-color: var(--c-ms-gl-bg);
}
.gl-inpreparation__text {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  background: rgba(0,0,0,0.5);
  color: #e46f85;
  text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff, 0px 0px 1px #fff,1px 2px 5px #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 835px) {
  section#members-topsection {
    padding: 2rem 0vw;
  }
  .rank-table {
    margin: 0 auto;
  }
  .rank-table-type dd {
    display: none;
  }
  .starburst {
    top: -7.2em;
    bottom: auto;
    margin-left: -1.6em;
    font-size: var(--fs-s);
  }
  .rank-table-pointrate {
    font-size: var(--fs-l);
  }
  .gl-inpreparation__text {
    font-size: var(--fs-s);
  }
  .rank-ic {
    max-width: 50%;
    padding-left: 0.5rem;
    margin: 0 auto 0.1em;
    display: block;
  }
  .rank-ic > img {
    margin-right: 0;
    top: 0;
  }
  .rank-ic-yen {
    padding: 0.4em 0.6em;
  }
  .rank-link-btn{
    padding-bottom: 1.5rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: var(--fs-s);
  }
  .rank-link-btn::after {
    right: calc(50% - 0.5rem);
    top: auto;
    bottom: 0.4rem;
  }
}