/*
 * box-calc
 * ----------------------------------------------------------------------------
 *
 */
.box-calc {
  display: flex;
  margin-top: var(--space-size-20);
}

.box-calc .text-center {
  margin: 0;
}

.box-calc .total-area {
  min-width: 28%;
}

.box-calc .total-area .border-main-box {
  padding: var(--space-size-14) 0;
  border: 1px solid var(--ion-box-calc-border-color);
  border-radius: 5px;
}

.box-calc .breakdown-area .border-default-box {
  padding: var(--space-size-4) var(--space-size-22);
  border: 1px solid var(--ion-color-step-150);
  border-radius: 5px;
}

.box-calc .doubleclm-second {
  position: relative;
  min-width: 14%;
}

.box-calc .doubleclm-second .border-default-box {
  padding: var(--space-size-14) 0;
}

.box-calc .arithmetic {
  padding: var(--space-size-14) var(--space-size-4);
}

.box-calc .remarks {
  margin-top: var(--space-size-4);
  font-size: var(--font-size-12);
}

.box-calc .doubleclm-second .remarks {
  position: absolute;
  right: 0;
  word-break: keep-all;
}

/*
 * box-calc-triangle
 * ----------------------------------------------------------------------------
 *
 */
.box-calc-triangle-wrapper {
  margin-top: 0;
}

/* 各ボックスの説明文 */
.box-calc-triangle-remarks {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 各ボックスの説明文 */
.box-calc-triangle-remarks .remarks-text {
  color: var(--ion-default-text-color);
  font-size: var(--font-size-10);
  font-family: var(--hiragino-font-3);
  line-height: 12px;
  text-align: center;
}

.box-calc-triangle-remarks .remarks-text:first-child {
  width: 20%;
  margin-right: var(--space-size-16);
}

.box-calc-triangle-remarks .remarks-text:nth-child(2) {
  width: 19%;
}

.box-calc-triangle-remarks .remarks-text:last-child {
  width: 100px;
  margin-left: auto;
}

.box-calc-triangle-remarks + .box-calc-triangle {
  margin-top: var(--space-size-10);
}

/* ボックス1列分のスタイル */
.box-calc-triangle {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 45px;
}

.box-calc-triangle + .box-calc-triangle {
  margin-top: var(--space-size-10);
}

/* 演算記号 */
.box-calc-triangle .arithmetic {
  padding: 0 var(--space-size-2);
  color: var(--ion-default-text-color);
  font-size: var(--font-size-14);
  font-family: var(--hiragino-font-3);
}

.box-calc-triangle .arithmetic:first-of-type {
  padding: 0 var(--space-size-4);
}

/* オレンジの矢印 */
.box-calc-triangle .triangle-right-img {
  display: flex;
  align-items: center;
  padding: 0 var(--space-size-6);
}

.box-calc-triangle .triangle-right-img img {
  width: 7px;
  min-width: 7px;
  height: 16px;
}

/* ボックス本体 */
.box-calc-triangle .border-box {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24%;
  height: 100%;
  padding: var(--space-size-10);
  border: 1px solid var(--ion-form-border-color);
  border-radius: 5px;
}

.box-calc-triangle .border-box .box-inner-text {
  color: var(--ion-default-text-color);
  font-weight: bold;
  font-size: var(--font-size-12);
  font-family: var(--hiragino-font-6);
  line-height: 12px;
  white-space: nowrap;
  text-align: center;
}

.box-calc-triangle .border-box .box-inner-text .text-mini {
  font-size: var(--font-size-10);
  font-family: var(--hiragino-font-6);
  line-height: 0;
}

.box-calc-triangle .border-box .box-inner-text .text-mini[textNormal] {
  font-weight: normal;
  font-size: var(--font-size-10);
  font-family: var(--hiragino-font-3);
}

.box-calc-triangle .border-box:first-of-type {
  width: 20%;
}

.box-calc-triangle .border-box:nth-of-type(2) {
  width: 19%;
}

.box-calc-triangle .border-box:nth-of-type(3),
.box-calc-triangle .border-box:last-of-type {
  justify-content: flex-end;
}

/* box-calc-triangleのmargin-top制御（デフォルトPCSP0） */
/* margin-top:PC10,SP10（下記に直前の部品を追加していく） */
.title-small + .box-calc-triangle-wrapper {
  margin-top: var(--space-size-10);
}