/* =========================================================
   二次創作ガイドラインボタン：ここから
   既存のX・LINEボタンのCSSは変更せず、新しいボタンだけ追加
   ========================================================= */

/* スマートフォン用 */
.header__sns__guideline {
  /* ヘッダー内の指定位置に配置 */
  position: absolute;

  /* X・LINEより手前に表示 */
  z-index: 3;

  /* LINEボタンの少し下に配置 */
  top: 15.2rem;

  /* 画面右側に配置 */
  right: 0.04rem;

  /* スマートフォンでの表示幅：約86px */
  width: 8.6rem;

  /* 縦横比を維持 */
  height: auto;

  /* 既存のリスト余白を無効化 */
  margin: 0;
  padding: 0;

  /* リストの黒丸を非表示 */
  list-style: none;
}

/* リンクの表示領域を画像サイズに合わせる */
.header__sns__guideline > a {
  display: block;
  width: 100%;
  height: auto;

  /* マウスを乗せたときのアニメーション */
  transition:
    filter 0.25s ease,
    transform 0.25s ease;
}

/* ガイドラインボタン画像 */
.header__sns__guideline img {
  display: block;

  /* 親要素の幅に合わせる */
  width: 100%;

  /* 既存CSSによる最大幅制限を解除 */
  max-width: none;

  /* 画像の縦横比を維持 */
  height: auto;
}

/* PCでマウスを乗せたときの演出 */
.header__sns__guideline > a:hover {
  filter: brightness(1.08);
  transform: scale(1.04);
}

/* キーボード操作時のフォーカス表示 */
.header__sns__guideline > a:focus-visible {
  outline: 3px solid #fff5a8;
  outline-offset: 3px;
  border-radius: 50%;
}

/* PC用：画面幅900px以上 */
@media screen and (min-width: 900px) {
  .header__sns__guideline {
    /* X・LINEの中央下に配置 */
    top: 19.2rem;
    right: 2.5rem;

    /* PCでの表示幅：約236px */
    width: 23.6rem;
  }
}

/* 動きを減らす設定を使用している端末への対応 */
@media (prefers-reduced-motion: reduce) {
  .header__sns__guideline > a {
    transition: none;
  }
}

/* =========================================================
   二次創作ガイドラインボタン：ここまで
   ========================================================= */