.user-rank-info {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border-radius: 20px;
  padding: 20px 5% 14px;
}

.user-rank-status {
  display: flex;
  position: relative;
  width: 50%;
  margin: 0 5% 0 0;
  padding: 0 5% 0 0;
}

.user-rank-status:after {
  position: absolute;
  content: "";
  height: 70%;
  width: 1px;
  background: #e5e5e5;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.user-rank-image {
  width: 70px;
}

.user-rank-image img {
  width: 100%;
  height: auto;
}

.user-rank-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-rank-textbox {
  width: calc(100% - 90px);
  margin: 0 0 0 20px;
}

.user-rank-label {
  display: inline-block;
  background: #f4b03c;
  color: #ffffff;
  padding: 4px 8px 2px;
  border-radius: 50px;
}

.user-rank-title {
  color: #f4b03c;
  font-weight: bold;
  font-size: 2rem;
  margin: 2px 0 0 0;
}

.user-rank.regular .user-rank-title {
  color: #02a4ba;
}

.user-rank.regular .user-rank-label {
  background: #02a4ba;
}

.user-rank.bronze .user-rank-title {
  color: #723b12;
}

.user-rank.bronze .user-rank-label {
  background: #723b12;
}

.user-rank.silver .user-rank-title {
  color: #686d73;
}

.user-rank.silver .user-rank-label {
  background: #686d73;
}

.user-rank.gold .user-rank-title {
  color: #d7b44c;
}

.user-rank.gold .user-rank-label {
  background: #d7b44c;
}

.user-rank.platinum .user-rank-title {
  color: #282828;
}

.user-rank.platinum .user-rank-label {
  background: #282828;
}

.user-next-rank-notice {
  font-size: 1.4rem;
  color: #333333;
}

.rank-privilege {
  width: 40%;
}

.info__privileges-list {
  display: flex;
  margin: 12px 0 0 0;
}

.rank-privilege-title {
  font-size: 1.5rem;
  text-align: center;
}

.info__privileges-item {
  width: calc((100% - 16px) / 3);
  padding: 12px 12px 32px 12px;
  border-radius: 6px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 6%);
}

.info__privileges-item + .info__privileges-item {
  position: relative;
  margin: 0 0 0 8px;
}

.info__privileges-item.label {
  background-position: center bottom 10px;
  background-size: 60% auto;
  background-repeat: no-repeat;
}

.info__privileges-item.label.unlocked {
  background-image: url(../../../img/mypage/rank-label-2.png);
}

.info__privileges-item.label.locked {
  background-image: url(../../../img/mypage/rank-label-1.png);
  opacity: 0.25;
}

.info__privileges-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info__privileges-item-icon {
  width: 64%;
  height: auto;
}

.info__privileges-item-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
  line-height: 1.35;
  margin: 0;
}

.info__privileges-notes-txt {
  text-align: center;
  color: #999999;
}

/* 達成率 */
.achievement-rate {
  float: left;
  width: calc((100% - 20px) / 2);
  padding: 28px 2% 16px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}

@media screen and (max-width: 320px) {
  .achievement-rate {
    padding: 24px 0 20px;
  }
}

.achievement-rate__block {
  display: flex;
  justify-content: center;
  text-align: center;
}

.achievement-rate__maintain,
.achievement-rate__next {
  width: calc((100% - 16px) / 2);
}

.regular .achievement-rate__maintain {
  display: none;
}

.platinum .achievement-rate__next {
  display: none;
}

.achievement-rate__next-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 400;
  color: #333333;
}

.achievement-rate__next-title-rank {
  font-size: 1.4rem;
  font-weight: bold;
}

path.st0 {
  fill: none;
  stroke: #05999e;
  stroke-width: 28;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.regular .achievement-rate__next-title-rank {
  color: #723b12;
}

.bronze .achievement-rate__next-title-rank {
  color: #686d73;
}

.silver .achievement-rate__next-title-rank {
  color: #d7b44c;
}

.gold .achievement-rate__next-title-rank {
  color: #282828;
}

.achievement-rate__maintain-title {
  color: #333333;
  font-size: 1.3rem;
  font-weight: 400;
}

.achievement-rate__chart {
  position: relative;
  margin: 10px 0 0 0;
}

.achievement-rate__chart-img {
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 320px) {
  .achievement-rate__chart-img {
    width: 100%;
  }
}

.achievement-rate__chart-inside {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: -0.5px;
  line-height: 1.3;
  color: #000;
}

.achievement-rate__chart-text {
  display: block;
  font-size: 11px;
  font-weight: 400;
}

.achievement-rate__achievement-text {
  font-size: 15px;
}

.achievement-rate__chart-num {
  font-size: 18px;
}

.achievement-rate__sign {
  font-size: 1.3rem;
}

.achievement-rate__deadline {
  text-align: center;
  margin: 20px 0 0;
}

.achievement-rate__deadline-title {
  display: inline-block;
  color: #999999;
  font-size: 1.2rem;
}

.achievement-rate__deadline-date {
  display: inline-block;
  padding: 0 0 0 8px;
  letter-spacing: 0.8px;
}

.ask-rank {
  text-align: right;
  margin: 12px 0 0 0;
}

.text-link {
  position: relative;
  display: inline-block;
  padding: 0 0 1px 0;
  color: #004d89;
  border-bottom: 1px solid #004d89;
  font-size: 1.2rem;
}

.ask-rank__link:before {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid #004d89;
  border-radius: 50%;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
}

.ask-rank__link::after {
  position: absolute;
  content: "?";
  width: 12px;
  height: 12px;
  left: -16px;
  top: 50%;
  font-size: 11px;
  line-height: 1.3;
  transform: translateY(-50%);
  text-align: center;
}

/* 月別取引詳細 */
.report {
  float: right;
  width: calc((100% - 20px) / 2);
  padding: 22px 5%;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.report__title {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.report table,
.report th,
.report td {
  border-collapse: collapse;
  line-height: 1.5;
}

.report table {
  width: 100%;
  margin: 12px 0 0 0;
}

.report table tbody {
  width: 100%;
  overflow-y: scroll;
  max-height: 176px;
  display: block;
}

.report table tr {
  display: table;
  width: 100%;
  border-bottom: 1px #ececec solid;
}

.report table th {
  padding: 6px 0;
  font-size: 1.3rem;
  color: #333;
  text-align: right;
}

.report table td {
  padding: 7px 0 6px;
}

.report table th:nth-of-type(1) {
  width: 24%;
  text-align: left;
}

.report table th:nth-of-type(2) {
  width: 28%;
}

.report table th:nth-of-type(3) {
  width: 24%;
}

.report table th:nth-of-type(4) {
  width: 24%;
}

.report table td:nth-of-type(1) {
  font-size: 1.2rem;
  color: #333;
  text-align: left;
}

.report table td:nth-of-type(2) {
  font-size: 1.3rem;
  font-weight: bold;
  color: #333333;
  text-align: right;
}

.report table td:nth-of-type(3),
.report td:nth-of-type(4) {
  font-size: 1.2rem;
  font-weight: 400;
  color: #333333;
  text-align: right;
}

/* 取引金額 */

.transaction {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px 0 0 0;
  padding: 18px 0 0;
  background: #ffffff;
  border-top: 1px #ececec solid;
}

.transaction__title {
  display: inline-block;
  font-size: 1.3rem;
  color: #999;
  font-weight: 400;
}

.transaction__amount {
  margin: 0 0 0 12px;
  font-size: 24px;
  font-weight: bold;
}

.transaction__amount-sign {
  font-size: 22px;
  font-weight: 400;
  padding: 0 3px 0 0;
}

/* ゲージ */
.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  padding: 45px 23px;
  width: 45px;
  height: 0px;
  border: 16px solid #f0f0f0;
  border-radius: 100px;
  line-height: 50px;
}

.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.chart_outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 16;
  stroke-dasharray: 534;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.regular .chart_outer.next {
  stroke: #05999e;
}

.bronze .chart_outer.next {
  stroke: #87989b;
}
.bronze .chart_outer.keep {
  stroke: #05999e;
}

.silver .chart_outer.next {
  stroke: #f5b040;
}
.silver .chart_outer.keep {
  stroke: #87989b;
}

.gold .chart_outer.next {
  stroke: #252829;
}
.gold .chart_outer.keep {
  stroke: #f5b040;
}

.platinum .chart_outer.keep {
  stroke: #252829;
}

.chart[data-percent="0"] .chart_outer {
  stroke-dashoffset: 537;
  -webkit-animation: show0 2s;
  animation: show0 2s;
}

.chart[data-percent="5"] .chart_outer {
  stroke-dashoffset: 530;
  -webkit-animation: show5 2s;
  animation: show5 2s;
}
.chart[data-percent="10"] .chart_outer {
  stroke-dashoffset: 510;
  -webkit-animation: show10 2s;
  animation: show10 2s;
}

.chart[data-percent="15"] .chart_outer {
  stroke-dashoffset: 490;
  -webkit-animation: show15 2s;
  animation: show15 2s;
}

.chart[data-percent="20"] .chart_outer {
  stroke-dashoffset: 470;
  -webkit-animation: show20 2s;
  animation: show20 2s;
}

.chart[data-percent="25"] .chart_outer {
  stroke-dashoffset: 450;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}

.chart[data-percent="30"] .chart_outer {
  stroke-dashoffset: 435;
  -webkit-animation: show30 2s;
  animation: show30 2s;
}

.chart[data-percent="35"] .chart_outer {
  stroke-dashoffset: 420;
  -webkit-animation: show35 2s;
  animation: show35 2s;
}

.chart[data-percent="40"] .chart_outer {
  stroke-dashoffset: 405;
  -webkit-animation: show40 2s;
  animation: show40 2s;
}

.chart[data-percent="45"] .chart_outer {
  stroke-dashoffset: 390;
  -webkit-animation: show45 2s;
  animation: show45 2s;
}

.chart[data-percent="50"] .chart_outer {
  stroke-dashoffset: 375;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent="55"] .chart_outer {
  stroke-dashoffset: 360;
  -webkit-animation: show55 2s;
  animation: show55 2s;
}
.chart[data-percent="60"] .chart_outer {
  stroke-dashoffset: 345;
  -webkit-animation: show60 2s;
  animation: show60 2s;
}

.chart[data-percent="65"] .chart_outer {
  stroke-dashoffset: 330;
  -webkit-animation: show65 2s;
  animation: show65 2s;
}

.chart[data-percent="70"] .chart_outer {
  stroke-dashoffset: 310;
  -webkit-animation: show70 2s;
  animation: show70 2s;
}

.chart[data-percent="75"] .chart_outer {
  stroke-dashoffset: 290;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent="80"] .chart_outer {
  stroke-dashoffset: 275;
  -webkit-animation: show80 2s;
  animation: show80 2s;
}

.chart[data-percent="85"] .chart_outer {
  stroke-dashoffset: 260;
  -webkit-animation: show85 2s;
  animation: show85 2s;
}

.chart[data-percent="90"] .chart_outer {
  stroke-dashoffset: 245;
  -webkit-animation: show90 2s;
  animation: show90 2s;
}

.chart[data-percent="95"] .chart_outer {
  stroke-dashoffset: 230;
  -webkit-animation: show95 2s;
  animation: show95 2s;
}

.chart[data-percent="100"] .chart_outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

@-webkit-keyframes show0 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 537;
  }
}

@keyframes show0 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 537;
  }
}

@-webkit-keyframes show5 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 530;
  }
}

@keyframes show5 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 530;
  }
}

@-webkit-keyframes show10 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 510;
  }
}

@keyframes show10 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 510;
  }
}

@-webkit-keyframes show15 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 490;
  }
}

@keyframes show15 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 490;
  }
}

@-webkit-keyframes show20 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 470;
  }
}

@keyframes show20 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 470;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 450;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 450;
  }
}

@-webkit-keyframes show30 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 435;
  }
}

@keyframes show30 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 435;
  }
}

@-webkit-keyframes show35 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 420;
  }
}

@keyframes show35 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 420;
  }
}

@-webkit-keyframes show40 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 405;
  }
}

@keyframes show40 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 405;
  }
}

@-webkit-keyframes show45 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 390;
  }
}

@keyframes show45 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 390;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 375;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 375;
  }
}

@-webkit-keyframes show55 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 360;
  }
}

@keyframes show55 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 360;
  }
}

@-webkit-keyframes show60 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 345;
  }
}

@keyframes show60 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 345;
  }
}

@keyframes show65 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 330;
  }
}

@-webkit-keyframes show65 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 330;
  }
}

@keyframes show70 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 310;
  }
}

@-webkit-keyframes show70 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 310;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 310;
  }
}

@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 310;
  }
}

@keyframes show80 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 275;
  }
}

@-webkit-keyframes show80 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 275;
  }
}

@keyframes show85 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 260;
  }
}

@-webkit-keyframes show85 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 260;
  }
}

@keyframes show90 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 245;
  }
}

@-webkit-keyframes show90 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 245;
  }
}

@keyframes show95 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 230;
  }
}

@-webkit-keyframes show95 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 230;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 200;
  }
}

@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 200;
  }
}