/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

body {
  background-color: #F5F5F4:
}

.kl-header-spacer {
  height: 82px;
}

html {
  scroll-padding-top: 96px;
}

[id] {
  scroll-margin-top: 96px;
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 80px;
  }

  [id] {
    scroll-margin-top: 80px;
  }
}

/*************************************
 * bt-button
 *************************************/

.bt-btn__link {
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

/* primary */
.bt-btn__link--primary {
  background: #78d000;
  color: #ffffff;
  border-color: #0B9A82;
}

.bt-btn__link--primary:hover,
.bt-btn__link--primary:focus,
.bt-btn__link--primary:active {
  background: #066260;
  color: #ffffff;
  border-color: #066260;
}

/* secondary */
.bt-btn__link--secondary {
  background: #ffffff;
  color: #0B9A82;
  border-color: #0B9A82;
}

.bt-btn__link--secondary:hover,
.bt-btn__link--secondary:focus,
.bt-btn__link--secondary:active {
  background: #f2fbf9;
  color: #066260;
  border-color: #066260;
}

/* custom1 */
.bt-btn__link--custom1 {
  background: #1f2937;
  color: #ffffff;
  border-color: #1f2937;
  border-radius: 999px;
}

.bt-btn__link--custom1:hover,
.bt-btn__link--custom1:focus,
.bt-btn__link--custom1:active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

/* custom2 */
.bt-btn__link--custom2 {
  background: #f8f8f8;
  color: #222222;
  border-color: #d6d6d6;
}

.bt-btn__link--custom2:hover,
.bt-btn__link--custom2:focus,
.bt-btn__link--custom2:active {
  background: #ececec;
  color: #111111;
  border-color: #bdbdbd;
}

/* custom3 */
.bt-btn__link--custom3 {
  background: #244c5a;
  color: #ffffff;
  border-color: #244c5a;
  border-radius: 10px;
}

.bt-btn__link--custom3:hover,
.bt-btn__link--custom3:focus,
.bt-btn__link--custom3:active {
  background: #193844;
  color: #ffffff;
  border-color: #193844;
}

/* ------------------------------------------------------------
   bt_blog-list-custom-link
   Theme decorative styles only
   - module.css 側でレイアウト/構造を管理
   - child.css 側で見た目/装飾を管理
------------------------------------------------------------ */


/* ============================================================
   1. Module root
   モジュール全体の見た目に関する設定
============================================================ */
.bt-blog-list-custom-link {
  background: transparent;
}


/* ============================================================
   2. Header
   タイトル上部の英字、見出し周辺
============================================================ */
.bt-blog-list-custom-link__header {
  margin-bottom: 40px;
}

.bt-blog-list-custom-link__eyebrow {
  margin: 0 0 16px;
  color: #425c9b;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.bt-blog-list-custom-link__heading {
  margin: 0;
  color: #1a252d;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}


/* ============================================================
   3. List
   記事一覧全体の見た目調整
============================================================ */
.bt-blog-list-custom-link__items {
  gap: 20px;
}


/* ============================================================
   4. Card common
   カード全体の共通装飾
============================================================ */
.bt-blog-list-custom-link__item {
  background: #ffffff;
  color: #111111;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: none;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.bt-blog-list-custom-link__item--linked {
  cursor: pointer;
}

.bt-blog-list-custom-link__item--linked:hover,
.bt-blog-list-custom-link__item--linked:focus-visible {
  transform: translateY(-2px);
  border-color: #1a252d;
  text-decoration: none;
}

.bt-blog-list-custom-link__item--static {
  cursor: default;
}

.bt-blog-list-custom-link__item--static:hover,
.bt-blog-list-custom-link__item--static:focus-visible {
  transform: none;
  border-color: #e5e7eb;
  text-decoration: none;
}


/* ============================================================
   5. Media / image area
   画像エリアの装飾
============================================================ */
.bt-blog-list-custom-link__media {
  background: #ffffff;
}

/* 縦レイアウト時：画像下に区切り線 */
.bt-blog-list-custom-link__item--vertical .bt-blog-list-custom-link__media {
  padding: 32px;
  border-bottom: 1px solid #ececec;
}

/* 横レイアウト時：画像右に区切り線 */
.bt-blog-list-custom-link__item--horizontal .bt-blog-list-custom-link__media {
  padding: 0;
  border-right: 1px solid #ececec;
}


/* ============================================================
   6. Body
   カード本文エリアの余白設定
============================================================ */
.bt-blog-list-custom-link__item--vertical .bt-blog-list-custom-link__body {
  padding: 24px 22px 28px;
}

.bt-blog-list-custom-link__item--horizontal .bt-blog-list-custom-link__body {
  padding: 24px 28px;
}

/* 画像がない記事用の上余白 */
.bt-blog-list-custom-link__item:not(:has(.bt-blog-list-custom-link__media)) .bt-blog-list-custom-link__body {
  padding-top: 36px;
}


/* ============================================================
   7. Text elements
   日付 / タイトル / 概要
============================================================ */
.bt-blog-list-custom-link__date {
  margin-bottom: 12px;
  color: #666666;
  font-size: 13px;
  line-height: 1.6;
}

.bt-blog-list-custom-link__title {
  margin: 0;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

.bt-blog-list-custom-link__excerpt {
  margin: 14px 0 0;
  color: #222222;
  font-size: 15px;
  line-height: 1.9;
  word-break: break-word;
}


/* ============================================================
   8. Tags
   タグ一覧とタグ見た目
============================================================ */
.bt-blog-list-custom-link__tags {
  gap: 8px;
  margin-top: 16px;
}

.bt-blog-list-custom-link__tag {
  padding: 6px 10px;
  border: 1px solid #1a252d;
  border-radius: 9999px;
  background: transparent;
  color: #1a252d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}


/* ============================================================
   9. Empty state
   記事がない場合の見た目
============================================================ */
.bt-blog-list-custom-link__empty {
  margin: 0;
  padding: 32px;
  background: #ffffff;
  color: #444444;
  font-size: 15px;
  line-height: 1.8;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}


/* ============================================================
   10. Pagination
   ページネーション全体・各リンクの見た目
============================================================ */
.bt-blog-list-custom-link__pagination {
  gap: 12px;
  margin-top: 40px;
}

.bt-blog-list-custom-link__pagination-pages {
  gap: 8px;
}

.bt-blog-list-custom-link__pagination-link {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  color: #1a252d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid #1a252d;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bt-blog-list-custom-link__pagination-link:hover,
.bt-blog-list-custom-link__pagination-link:focus-visible {
  background: #1a252d;
  border-color: #1a252d;
  color: #ffffff;
  text-decoration: none;
}

.bt-blog-list-custom-link__pagination-link--current {
  background: #1a252d;
  border-color: #1a252d;
  color: #ffffff;
}

.bt-blog-list-custom-link__pagination-link--prev,
.bt-blog-list-custom-link__pagination-link--next {
  min-width: auto;
  padding: 0 18px;
}


/* ============================================================
   11. Responsive: SP
   スマホ表示時の装飾調整
============================================================ */
@media (max-width: 767px) {
  /* Header */
  .bt-blog-list-custom-link__header {
    margin-bottom: 28px;
  }

  .bt-blog-list-custom-link__eyebrow {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .bt-blog-list-custom-link__heading {
    font-size: 24px;
  }

  /* List */
  .bt-blog-list-custom-link__items--vertical,
  .bt-blog-list-custom-link__items--horizontal {
    gap: 16px;
  }

  /* Media */
  .bt-blog-list-custom-link__item--vertical .bt-blog-list-custom-link__media {
    padding: 24px;
  }

  .bt-blog-list-custom-link__item--horizontal .bt-blog-list-custom-link__media {
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid #ececec;
  }

  /* Body */
  .bt-blog-list-custom-link__item--vertical .bt-blog-list-custom-link__body,
  .bt-blog-list-custom-link__item--horizontal .bt-blog-list-custom-link__body {
    padding: 20px 18px 24px;
  }

  /* Text */
  .bt-blog-list-custom-link__title {
    font-size: 17px;
  }

  .bt-blog-list-custom-link__excerpt {
    font-size: 14px;
    line-height: 1.8;
  }

  /* Pagination */
  .bt-blog-list-custom-link__pagination {
    margin-top: 28px;
    gap: 10px;
  }

  .bt-blog-list-custom-link__pagination-link {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }
}