/************************************
** ブログカード
************************************/
/* 色の設定：他サイトで使う場合はここだけ変更すればOK */
:root {
  --bc-accent: #146deb;   /* アイコン・ラベル・シェブロン・ホバー時の枠と文字 */
  --bc-border: #e6e3ef;   /* 枠線（通常時） */
  --bc-icon-bg: #eaf4ff;  /* アイコンの背景 */
  --bc-title: #1c1b22;    /* タイトル文字 */
}

.blogcard-snippet,
.blogcard-footer,
.blogcard-thumbnail {
  display: none;
}

.blogcard-wrap {
  max-width: 600px;
  margin: 2em auto;
}

/* カード本体 */
.blogcard {
  background: #fff;
  border: 1px solid var(--bc-border) !important;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(26, 23, 38, 0.04), 0 8px 20px -14px rgba(26, 23, 38, 0.22);
  /* 文字を上下中央に置く（min-heightで余った分を上下へ均等に配分する） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
  padding: 16px 52px 16px 84px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* 左のアイコン（本のマーク） */
.blogcard::before {
  background: var(--bc-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146deb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
  border-radius: 12px;
  content: "";
  height: 48px;
  left: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
}

/* 右のシェブロン */
.blogcard::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146deb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
  content: "";
  height: 20px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.2s ease;
  width: 20px;
}

.blogcard-content {
  margin-left: 0 !important;
  min-height: auto !important;
  padding-right: 0;
}

/* 上部の小さいラベル（旧式カード用） */
.blogcard-content::before {
  content: "関連マニュアル";
  color: var(--bc-accent);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 2px;
}

.blogcard-title {
  color: var(--bc-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
  text-align: left;
  transition: color 0.2s ease;
}

/* ホバー時：枠と文字が青になり、少し浮いてシェブロンが右へ動く */
.blogcard-wrap:hover .blogcard {
  border-color: var(--bc-accent) !important;
  box-shadow: 0 6px 18px -10px rgba(20, 109, 235, 0.45);
  transform: translateY(-2px);
}
.blogcard-wrap:hover .blogcard-title {
  color: var(--bc-accent);
}
.blogcard-wrap:hover .blogcard::after {
  right: 16px;
}

/* ===== 新式（ブロック版ブログカード）対応 ===== */
/* Cocoon側でラベルが設定されているカードだけCSSラベルを消す。
   ラベル「なし」（.bct-none）のカードはCSSの「関連マニュアル」を表示する */
.blogcard-type:not(.bct-none) .blogcard-content::before {
  display: none;
}
/* ラベル「なし」のときは空の .blogcard-label 要素ごと非表示にする */
.bct-none .blogcard-label {
  display: none;
}
.blogcard-type .blogcard-label {
  background: transparent !important;
  border-radius: 0;
  color: var(--bc-accent);
  font-size: 11px;
  font-weight: 700;
  left: auto;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 2px;
  padding: 0;
  position: static;
  top: auto;
}
.blogcard-type .blogcard-label .fa {
  display: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*834px以下*/
@media screen and (max-width: 834px){
  .blogcard {
    min-height: 72px;
    padding: 14px 44px 14px 70px;
  }
  .blogcard-title {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
  }
  .blogcard::before {
    background-size: 20px 20px;
    height: 40px;
    left: 16px;
    width: 40px;
  }
  .blogcard::after {
    background-size: 18px 18px;
    height: 18px;
    right: 16px;
    width: 18px;
  }
}

/*560px以下*/
@media screen and (max-width: 560px) {
  .blogcard-title {
    font-size: 13.5px;
  }
}

/*320px以下*/
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
}