@charset "utf-8";

/* ==================================================
index
================================================== */
.individualPointIndex__keyMark {
  > dl {
    display: flex;
    
    > dt {
      flex-shrink: 0;
    }
  }
}

.individualPointIndex__box {
  padding: 40px;
  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%;
  }
}

.individualPointStep__step_body {
  display: flex;
  gap: 40px;
  
  > figure {
    flex-shrink: 0;
  }
  
  > div {
    padding-top: 15px;
  }
}


/* ==================================================
coin
================================================== */
.individualPointCoin__dogCont {
  position: relative;
}

.individualPointCoin__dogCont_bubble {
  display: flex;
  gap: 40px;
  flex-shrink: 0;
  position: absolute;
  top: 2em;
  right: 80px;
}

.individualPointCoin__dogCont_text {
  > span {
    padding: 20px;
    background: #edf7fc;
    border-radius: 10px;
    display: block;
    font-size: 14px;
    position: relative;
    border-bottom: 4px solid #007DAF;
    margin-top: 20px;
    
    &::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;
  }
}