@charset "utf-8";
/* ブログ本文のリンクボタン（2026-09-01）
 * 既存の a.article_btn（グレー塗り・白文字・矢印）を土台に、色の選択肢と中央寄せを足す。
 * ★このファイルはフロントと TinyMCE（body#tinymce）の両方で読む。
 *   フロント用は article 配下、エディタ用は body#tinymce 配下で、混ざらない。
 */

/* ===== フロント（本文の中） ===== */
article a.article_btn {
  letter-spacing: 0.06em;
}
article a.article_btn_sumi {
  background-color: #151515;
  color: #FFFFFD;
}
article a.article_btn_beige {
  background-color: #F1EEE5;
  color: #151515;
}
article a.article_btn_line {
  background-color: transparent;
  color: #151515;
  border: 1px solid #151515;
}
/* 明るい地のときは矢印を濃い色に差し替える */
article a.article_btn_beige::after,
article a.article_btn_line::after {
  background-image: url(../images/icon_arrow.svg);
}
/* 中央寄せ */
article a.article_btn_center {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  article a.article_btn {
    padding: 15px 34px;
  }
}

/* ===== 編集画面（ビジュアルタブ）のプレビュー ===== */
/* TinyMCE の iframe の body は id="tinymce"。フロントには絶対に当たらない。 */
body#tinymce a.article_btn {
  margin: 30px 0;
  display: inline-block;
  background-color: #6D6E70;
  padding: 17px 40px;
  position: relative;
  color: #FFFFFD;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.06em;
  text-decoration: none;
}
body#tinymce a.article_btn::after {
  content: "";
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  transform: translateY(-50%);
  background: url(../images/icon_arrow_w.svg) no-repeat center/contain;
}
body#tinymce a.article_btn_sumi {
  background-color: #151515;
  color: #FFFFFD;
}
body#tinymce a.article_btn_beige {
  background-color: #F1EEE5;
  color: #151515;
}
body#tinymce a.article_btn_line {
  background-color: transparent;
  color: #151515;
  border: 1px solid #151515;
}
body#tinymce a.article_btn_beige::after,
body#tinymce a.article_btn_line::after {
  background-image: url(../images/icon_arrow.svg);
}
body#tinymce a.article_btn_center {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}