@charset "UTF-8";
/* 基本設定
------------------------------------------------------------*/
/* ブレイクポイント
-------------------
pc: 1201px;
tb: 991px;
sp: 767px;
*/

/* ■ calculation-col---------------------------------*/
.explain{
  margin-top: 30px;
}
.explain .btn a{
  padding: 15px;
  font-weight: 400;
  font-size: 13px;
  font-size: clamp(1.2rem, 1.3vw, 1.3rem);
}
.page-charge .round_box-in{
  padding: 30px;
}
.calculation-col .calculation-in p{
  line-height: 1.5em;
}
.calculation-in{
  text-align: center;
}
.calculation-in .num{
  border: 3px solid;
  border-radius: 10px;
  padding: 15px;
}
.calculation-in .num p{
  font-size: 25px;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 700;  
  text-align: center;
}
.calculation-col .sign{
  font-size: 30px;
  font-weight: 700;
  padding-top: 2%;
  margin: 0 3%;
  text-align: center;
}
.calculation-in:first-of-type .num{
  border-color: var(--color-n-blue);
  color: var(--color-n-blue);
}
.calculation-in:nth-of-type(2) .num{
  border-color: #808080;
  color: #808080;
}
.calculation-in:nth-of-type(3) .num{
  border-color: #ff0000;
  color:#ff0000;
}
.annotation{
  margin-left: 0.5em;
}
.annotation li{
  text-indent: -0.5em;
  line-height: 1.5em;
  font-size: 1.2rem;
  font-size: clamp(1.1rem, 1.2vw, 1.2rem);
}
.page-charge .page_cont{
  margin-bottom: 80px;
}
@media screen and (max-width: 767px){
  .explain .btn a{
    font-size: 12px;
  }
  .page-charge .round_box-in{
    padding: 10px;
  }
  .calculation-col .sign{
    margin: 0;
    padding: 0;
    line-height: 1em;
  }
  .calculation-col .sign:nth-of-type(2){
    display: inline-block;
    transform: rotate(90deg);
    font-size: 2em;
    font-size: 30px;
    font-weight: 700;
  }
}