/*
 * grid-normal
 * ----------------------------------------------------------------------------
 *
 */
.grid-normal {
  width: 100%;
  margin-top: var(--space-size-20);
  color: var(--ion-default-text-color);
  font-size: var(--font-size-14);
  font-family: var(--hiragino-font-3);
  line-height: 18px;
  word-break: break-word;
  table-layout: fixed;
  border-top: 1px solid var(--ion-table-border-color);
  border-left: 1px solid var(--ion-table-border-color);
  border-collapse: separate;
  border-spacing: 0;
}

.grid-normal .main {
  color: var(--ion-label-text-color);
}

.grid-normal [gridTextBold] {
  font-weight: bold;
}

.grid-normal tbody {
  vertical-align: top;
}

.grid-normal th {
  width: 41%;
  padding: var(--space-size-14) var(--space-size-14) var(--space-size-18);
  font-weight: normal;
  text-align: left;
  background: var(--ion-table-title-bg-color);
  border-right: 1px solid var(--ion-table-border-color);
  border-bottom: 1px solid var(--ion-table-border-color);
}

.grid-normal td {
  width: 59%;
  padding: var(--space-size-14) var(--space-size-14) var(--space-size-18);
  border-right: 1px solid var(--ion-table-border-color);
  border-bottom: 1px solid var(--ion-table-border-color);
}

.grid-normal .center {
  text-align: center;
}

.grid-normal .vertical-center {
  vertical-align: middle;
}

.grid-normal .right {
  text-align: right;
}

/* gridのmargin-top制御（デフォルトPC20,SP20） */
/* margin-top:PC30,SP20（下記に直前の部品を追加していく） */
.title-heading + .grid-normal {
  margin-top: var(--space-size-20);
}

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

/* margin-top:PC6,SP6（下記に直前の部品を追加していく） */
.title-subheading + .grid-normal {
  margin-top: var(--space-size-6);
}

/*
 * grid-ex
 * ----------------------------------------------------------------------------
 *
 */
.grid-ex {
  width: 100%;
  margin-top: var(--space-size-20);
  color: var(--ion-default-text-color);
  font-size: var(--font-size-14);
  font-family: var(--hiragino-font-3);
  line-height: 18px;
  word-break: break-word;
  table-layout: fixed;
  border-top: 1px solid var(--ion-table-border-color);
  border-left: 1px solid var(--ion-table-border-color);
  border-collapse: separate;
  border-spacing: 0;
}

.grid-ex .main {
  color: var(--ion-label-text-color);
}

.grid-ex [gridTextBold] {
  font-weight: bold;
}

.grid-ex tbody {
  vertical-align: top;
}

.grid-ex th {
  padding: var(--space-size-12) var(--space-size-12) var(--space-size-14);
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  background: var(--ion-table-title-bg-color);
  border-right: 1px solid var(--ion-table-border-color);
  border-bottom: 1px solid var(--ion-table-border-color);
  width:18%;
}

.grid-ex td {
  padding: var(--space-size-12) var(--space-size-12) var(--space-size-14);
  border-right: 1px solid var(--ion-table-border-color);
  border-bottom: 1px solid var(--ion-table-border-color);
}

.grid-ex .center {
  text-align: center;
}

.grid-ex .right {
  text-align: right;
}

.grid-ex td.vertical-center {
  vertical-align: middle;
}

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

/* margin-top:PC6,SP6（下記に直前の部品を追加していく） */
.title-subheading + .grid-ex {
  margin-top: var(--space-size-6);
}

/*
 * ex-simulation-example
 * ----------------------------------------------------------------------------
 *
 */
.ex-simulation-example {
  margin-top: var(--space-size-20);
  font-family: var(--hiragino-font-3);
}

.graph_wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.graph_wrap + .graph_wrap {
  margin-top: var(--space-size-10);
}

.graph_wrap .description {
  padding-left: var(--space-size-10);
}

.graph_wrap .spend-text,
.graph_wrap .limit-text,
.graph_wrap .graph {
  display: table;
  vertical-align: middle;
}

.graph_wrap .spend-text {
  font-size: var(--font-size-10);
  line-height: 14px;
}

.graph_wrap .limit-text-area {
  display: flex;
  align-items: baseline;
}

.graph_wrap .limit-text-area img {
  width: 10px;
  height: 10px;
}

.graph_wrap .limit-text-area .limit-text {
  padding-left: var(--space-size-2);
  font-size: var(--font-size-10);
  line-height: 14px;
}

.graph_wrap .graph {
  flex-shrink: 0;
  width: 66%;
  height: 50px;
}

.graph_wrap .graph .limit {
  background: var(--ion-ex-limit-bg-color);
  border: 1px solid var(--ion-ex-limit-border-color);
}

.graph_wrap .graph .spend {
  background: var(--ion-ex-spend-bg-color);
  border: 1px solid var(--ion-ex-spend-border-color);
  border-right: 1px solid var(--ion-color-custom-white);
}

.graph_wrap .graph .spend + .limit {
  border-left: 1px solid var(--ion-color-custom-white);
}

.graph_wrap .graph .bar {
  display: table-cell;
  height: 50px;
  font-weight: bold;
  font-size: var(--font-size-14);
  font-family: var(--hiragino-font-5);
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}

.graph_wrap .graph .bar.limit {
  color: var(--ion-ex-limit-text-color);
}

.graph_wrap .graph .bar.spend {
  color: var(--ion-ex-spend-text-color);
}

.graph_wrap .graph .bar span {
  display: block;
  font-weight: normal;
  font-size: var(--font-size-10);
  white-space: nowrap;
}

.graph_wrap .graph01 .limit {
  width: 100%;
}

.graph_wrap .graph02 .spend {
  width: 50%;
}

.graph_wrap .graph02 .limit {
  width: 50%;
}

.graph_wrap .graph03 .spend {
  width: 25%;
}

.graph_wrap .graph03 .limit {
  width: 75%;
}

.graph_wrap .graph04 .spend {
  width: 78%;
}

.graph_wrap .graph04 .limit {
  width: 22%;
}

/* ex-simulation-exampleのmargin-top制御（デフォルトPC20,SP20） */
/* margin-top:PC30,SP20（下記に直前の部品を追加していく） */
.title-heading + .ex-simulation-example {
  margin-top: var(--space-size-20);
}

.img-grid-group {
  display: grid;
  grid-template-columns: repeat(2, 180px);
  justify-content: center;
  justify-items: center;
  column-gap: var(--space-size-30);
  row-gap: var(--space-size-14);
}

@media (max-width: 475px) {
  .img-grid-group {
    grid-template-columns: repeat(2, 43%) !important;
    column-gap: var(--space-size-12) !important;
    row-gap: var(--space-size-16) !important;
  }
}

.img-grid-group .title-subheading {
  margin-top: var(--space-size-10) !important;
  font-size: var(--font-size-12);
  text-align: center;
}
.img-grid-group img {
  width: 200px;
  margin-top: var(--space-size-8);
}