/*
 * title-normal
 * ----------------------------------------------------------------------------
 *
 */
.title-normal {
  color: var(--ion-title-text-color);
  font-weight: bold;
  font-size: var(--font-size-22);
  font-family: var(--hiragino-font-6);
  line-height: 30px;
}

/* title-normalの直下に下記部品が配置される場合、間余白を制御する */
/* margin-top:SP20（下記に直前の部品を追加していく） */
.title-normal + .text-left,
.title-normal + .text-right,
.title-normal + .list-text-asterisk,
.title-normal + .title-heading,
.title-normal + .title-subheading,
.title-normal + .grid-normal,
.title-normal + .grid-ex,
.title-normal + .info-box {
  margin-top: var(--space-size-20) !important;
}

/*
 * title-border
 * ----------------------------------------------------------------------------
 * SMS画面などで使用するタイトル
 */
.title-border {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 54px;
  padding: 0 var(--space-size-10) var(--space-size-10);
  color: var(--ion-listbox-title-text-color);
  font-weight: bold;
  font-size: var(--font-size-16);
  font-family: var(--hiragino-font-6);
  line-height: 20px;
  border-bottom: 1px solid var(--ion-separator-border-color);
}

/* title-borderの直下に下記部品が配置される場合、間余白を制御する */
/* margin-top:PC30/SP20（下記に直前の部品を追加していく） */
.title-border + .text-left {
  margin-top: var(--space-size-20) !important;
}

/*
 * title-heading
 * ----------------------------------------------------------------------------
 *
 */
.title-heading {
  position: relative;
  margin-top: var(--space-size-40);
  padding-bottom: var(--space-size-12);
  padding-left: var(--space-size-8);
  color: var(--ion-default-text-color);
  font-weight: bold;
  font-size: var(--font-size-16);
  font-family: var(--hiragino-font-6);
  line-height: 20px;
  border-bottom: 2px solid var(--ion-title-heading-border-color);
  border-left: 5px solid var(--ion-title-heading-corner-border-color);
}

.title-heading:before {
  position: absolute;
  bottom: -2px;
  left: -5px;
  display: inline-block;
  width: 100px;
  height: 2px;
  background-color: var(--ion-title-heading-corner-border-color);
  content: '';
}

/* title-headingの直下に下記部品が配置される場合、間余白を制御する */
.title-heading + .title-small {
  margin-top: var(--space-size-20);
}

/* title-headingのmargin-top制御（デフォルトPC50,SP40） */
/* margin-top:PC6,SP6（下記に直前の部品を追加していく） */
.acc-content > .title-heading:first-child,
.acc-content-white > .title-heading:first-child {
  margin-top: var(--space-size-6);
}

/*
 * title-small
 * ----------------------------------------------------------------------------
 *
 */
.title-small {
  margin-top: var(--space-size-30);
  color: var(--ion-title-heading-color);
  font-weight: bold;
  font-size: var(--font-size-16);
  font-family: var(--hiragino-font-6);
}

/* title-smallのmargin-top制御（デフォルトPC30,SP30） */
/* margin-top:PC6,SP6（下記に直前の部品を追加していく） */
.acc-content > .title-small:first-child,
.acc-content-white > .title-small:first-child {
  margin-top: var(--space-size-6);
}

/*
 * title-subheading
 * ----------------------------------------------------------------------------
 *
 */
.title-subheading {
  margin-top: var(--space-size-25);
  color: var(--ion-title-heading-color);
  font-weight: bold;
  font-size: var(--font-size-14);
  font-family: var(--hiragino-font-6);
}

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

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

.acc-content > .title-subheading:first-child,
.acc-content-white > .title-subheading:first-child {
  margin-top: var(--space-size-6);
}