/* ===============================
   投稿ページ用 SNSシェアボタン
================================= */

/* 中のシェアボックス */
.post-share {
  padding: 2rem 1rem;
  background-color: #f8f8f8;
  border-radius: 12px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #1da1f2;
}

/* 見出し */
.post-share__title {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: #333;
  font-weight: 600;
}

/* タイトル等の縦線装飾を消す */
.post-share__title::before,
.top-cta-title::before,
.top-cta-title h3::before,
.concept h2::before,
.concept h3::before {
  content: none !important;
  display: none !important;
}

/* ボタンコンテナ */
.post-share__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 各シェアボタン共通スタイル */
.post-share__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;

  border: 2px solid transparent; /* 初期は透明な枠線 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);

  transition:
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* ホバー・フォーカスで拡大＆枠色＆アウトライン */
.post-share__button:hover,
.post-share__button:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
  outline-offset: 3px;
  outline: 3px solid #90cdf4;
  outline-radius: 50%;
}

/* SNS別カラーと枠色設定 */
.post-share__button.share-x {
  background-color: #020304;
  border-color: #1da1f2;
}
.post-share__button.share-x:hover,
.post-share__button.share-x:focus-visible {
  background-color: #0d8ddb;
  border-color: #0d8ddb;
}

.post-share__button.share-facebook {
  background-color: #1877f2;
  border-color: #1877f2;
}
.post-share__button.share-facebook:hover,
.post-share__button.share-facebook:focus-visible {
  background-color: #145dbf;
  border-color: #145dbf;
}

.post-share__button.share-line {
  background-color: #00c300;
  border-color: #00c300;
}
.post-share__button.share-line:hover,
.post-share__button.share-line:focus-visible {
  filter: brightness(1.1);
  border-color: #009900;
}

.post-share__button.share-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color: #d6249f;
}
.post-share__button.share-instagram:hover,
.post-share__button.share-instagram:focus-visible {
  filter: brightness(1.1);
  border-color: #a71d82;
}

.post-share__button.share-youtube {
  background-color: #ff0000;
  border-color: #ff0000;
}
.post-share__button.share-youtube:hover,
.post-share__button.share-youtube:focus-visible {
  filter: brightness(1.1);
  border-color: #cc0000;
}

.post-share__button.share-github {
  background-color: #333;
  border-color: #333;
}
.post-share__button.share-github:hover,
.post-share__button.share-github:focus-visible {
  filter: brightness(1.2);
  border-color: #111;
}

.post-share__button.share-note {
  background-color: #ff5722;
  border-color: #ff5722;
}
.post-share__button.share-note:hover,
.post-share__button.share-note:focus-visible {
  filter: brightness(1.1);
  border-color: #e64a19;
}

/* レスポンシブ調整：スマホでサイズを少し縮小 */
@media screen and (max-width: 480px) {
  .post-share__button {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-width: 1.8px; /* 枠も少し細く */
  }
}