@charset "utf-8";

/* ==================================================
index
================================================== */
.individualPointIndex__spImage {
  > img {
    transform: translateX(-28px);
  }
}

.individualPointIndex__keyMark {
  > dl {
    > dd {
      margin-left: 1em;
      text-indent: -1em;
      padding-left: 1em;
    }
  }
}

.individualPointIndex__box {
  padding: 20px;
  border: 2px solid #007DAF;
  border-radius: 12px;
}


/* ==================================================
step
================================================== */
.individualPointStep__step {
  & .stepBox_icon {
    display: flex;
  }
  
  & .stepBox_icon-num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}

/* ==================================================
coin
================================================== */
.individualPointCoin__dogCont {
  
}

.individualPointCoin__dogCont_bubble {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-shrink: 0;
  padding: 0 10px;
}

.individualPointCoin__dogCont_text {
  > span {
    padding: 20px;
    background: #edf7fc;
    border-radius: 10px;
    display: block;
    font-size: 13px;
    position: relative;
    border-bottom: 4px solid #007DAF;
    margin-top: 10px;
    
    &::after {
      content: '';
      position: absolute;
      width: 30px;
      height: 20px;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
      background-color: #edf7fc;
      top: 30%;
      left: 100%;
    }
  }
}

.individualPointCoin__table {
  & table {
    table-layout: inherit;
  }
  
  & th,td {
    vertical-align: middle;
  }
  
  & .bgLGreen:first-child,
  & .bgBeige:first-child {
    border-right: 1px solid #B2CBD8;
  }
  
  & th:has(.individualPointCoin__table_v) {
    width: 5%;
    
    & + th {
      width: 18%;
    }
  }
  
  & .individualPointCoin__table_v {
    writing-mode: vertical-rl;
    white-space: pre;
    display: inline-block;
  }
}