@charset "UTF-8";
.background_fixed {
  background: url("../img/back_blackRhombus.svg");
  background-color: var(--bg-color);
  background-attachment: fixed;
}

:root {
  /* カラー */
  --black: #f8fafc!important;
  --white: #151515!important;
  --rader-color: 255 255 255;
  --bg-color:#151515!important;
  --img-white: brightness(0) invert(1);
  --img-change: invert(100%);
}

header h1 a img,
._caption_M img,
.followButton,
.instructions > .TwitterShare,
.partitionLine img,
.mentuzzleLink h4 img,
.testTop {
  filter: var(--img-change);
}

._captionFigure img,
.wing_container img,
.instinctTri_container dl > p,
.delta_container img,
.direction_container img,
._explanation_wrap dt,
._deltaBack,
.graph-bg,
.mental_container dl dt img,
.resultDlBtn img,
.bottomSymbol img,
.stateBox_top li img,
.instinctType_container h3 img {
  filter: var(--img-white);
}

@media screen and (max-width: 1365px) {
  .typeDisplay h2 {
    filter: var(--img-white);
  }
  .stateBox li img {
    filter: var(--img-black);
  }
  .shareButton_container .TwitterShare {
    filter: var(--img-change);
  }
}
@media screen and (min-width: 1366px) {
  .shareButton_container.first .shareMessage {
    color: var(--black);
    background-color: var(--white);
  }
  .stateBox li img {
    filter: var(--img-black);
  }
}
/* ---------------------------------------------------------
        上部・画面追尾
-----------------------------------------------------------*/
.followingBar {
  background-color: rgba(0, 0, 0, 0.9);
}

.per-box {
  --circle-r: 816; /* 直径(r)×3.14 */
  position: relative;
  width: 280px;
  height: 280px;
  margin: auto;
}

.per-box svg {
  width: 280px;
  height: 280px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.per-box svg circle {
  fill: none;
  stroke-width: 10;
  stroke: #fff;
  stroke-dasharray: var(--circle-r);
  stroke-dashoffset: 0;
  stroke-linecap: round;
}

.per-box .per-line {
  stroke-dashoffset: calc(var(--circle-r) - var(--circle-r) * var(--pie-percent) / 100);
  stroke: #666;
}

.per-box .pie-text {
  font-size: 50px;
  font-family: var(--hangyaku);
  color: var(--black);
  margin-bottom: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

._view-more::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("../img/lineArrow_white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
}