@use 'global/common' as global;

/* ------------------------------
 タイポグラフィ
------------------------------- */

/* ---------------
 見出し
--------------- */
// 共通
.acms-h1,
.acms-h2,
.acms-h3,
.acms-h4,
.acms-h5,
.acms-h6,
.acms-style h1,
.acms-style h2,
.acms-style h3,
.acms-style h4,
.acms-style h5,
.acms-style h6 {
  --acms-heading-line-height: 1.5;
  --acms-hading-color: #{global.$acms-color-black};

  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: bold;
  line-height: var(--acms-heading-line-height);
  color: var(--acms-hading-color);
}

// h1
.acms-h1,
.acms-style h1 {
  @include global.font-size(#{global.$acms-h1-font-size});
}

// h2
.acms-h2,
.acms-style h2 {
  @include global.font-size(#{global.$acms-h2-font-size});
}

// h3
.acms-h3,
.acms-style h3 {
  @include global.font-size(#{global.$acms-h3-font-size});
}

// h4
.acms-h4,
.acms-style h4 {
  @include global.font-size(#{global.$acms-h4-font-size});
}

// h5
.acms-h5,
.acms-style h5 {
  @include global.font-size(#{global.$acms-h5-font-size});
}

// h6
.acms-h6,
.acms-style h6 {
  @include global.font-size(#{global.$acms-h6-font-size});
}

// ---------------
// 段落
// ---------------
.acms-p,
.acms-style p {
  margin: 0 0 15px;
}

* + .acms-p,
* + .acms-style p {
  margin-top: 15px;
}

// ---------------
// リスト
// ---------------
.acms-ul,
.acms-ol,
.acms-dl,
.acms-style ul,
.acms-style ol,
.acms-style dl {
  margin-top: 0;
}

// リスト 点なし
.acms-list-nostyle {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

// リスト インライン
.acms-list-inline {
  padding-left: 0;

  li {
    display: inline-block;
    padding-right: 20px;
    margin-bottom: 5px;
  }
}

// 定義リスト
.acms-dl,
.acms-style dl {
  dt {
    font-weight: bold;
  }

  dd {
    margin-bottom: 10px;
    margin-left: 0;
  }
}

// 定義リスト 水平
.acms-dl-horizontal dt,
.acms-dl-line dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acms-dl-horizontal dd,
.acms-dl-line dd {
  padding-left: 0;
  margin: 0;

  @include global.clearfix;
}

.acms-dl-line dt {
  padding-top: 10px;
}

.acms-dl-line dd {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px global.$acms-color-gray60;
}

@include global.media-breakpoint-up(md) {
  .acms-dl-horizontal dt,
  .acms-dl-line dt {
    float: left;
    text-align: right;
  }

  .acms-dl-horizontal dd,
  .acms-dl-line dd {
    padding-left: 180px;
  }
}

// ---------------
// 引用
// ---------------
.acms-blockquote,
.acms-style blockquote {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  border-left: solid 5px global.$acms-color-gray60;
}

// ---------------
// WebFont
// ---------------
.acms-icon {
  padding-right: 8px;
}

[class*='acms-icon-'] {
  display: inline-block;
  font-family: acms-fonts;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: inherit;
  text-transform: none;
  vertical-align: middle;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
