/* 名前、メールアドレスの非表示 */
.wpd-form-col-left{
	display:none;
}

.detail-reaction__inner {
  /* ここに適用したいスタイルを追加 */
  padding: 20px;
  background-color: #f9f9f9; /* 軽い背景色を追加 */
  border-radius: 10px; /* 角丸のデザインを追加 */
  margin: auto; /* 中央揃え */
  max-width: 800px; /* 最大幅を設定 */
}

 /* リアクションボタン */



/* リアクションボタンエリア全体のスタイル */
.reaction_buttons {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  margin: 30px auto;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* タグライン（「励みになります。」）のスタイル */
.reaction_buttons_tagline {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #333;
}

/* ボタン配置用のリストスタイル */
.reaction_buttons ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 16px;
}

/* 各ボタンの基本スタイル */
.reaction_button {
  flex: 1;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  background-color: white;
  padding: 16px 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ホバー時のエフェクト */
.reaction_button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  border-color: #d0d0d0;
}

/* ボタンがクリックされた状態（投票済み） */
.reaction_button.voted {
  background-color: #f0f7ff;
  border-color: #c0d6f9;
}

/* ボタン内部のレイアウト */
.reaction_button div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* アイコン表示のためのスタイル */
.reaction_button::before {
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* 各ボタン固有のアイコンと色 */
.reaction_button_0::before {
  content: "\f004"; /* ハートアイコン */
  color: #ff6b6b;
}

.reaction_button_1::before {
  content: "\f0eb"; /* 電球アイコン */
  color: #ffc107;
}

.reaction_button_2::before {
  content: "\f04b"; /* プレイアイコン */
  color: #4dabf7;
}

/* ホバー時のアイコンアニメーション */
.reaction_button:hover::before {
  transform: scale(1.2);
}

/* ボタン名のスタイル */
.button_name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

/* 数字のスタイル */
.count_number {
  font-size: 16px;
  font-weight: 600;
  color: #666;
}

/* 括弧を非表示に */
.braces {
  display: none;
}

/* モバイル対応 */
@media (max-width: 600px) {
  .reaction_buttons ul {
    flex-direction: column;
  }
  
  .reaction_button {
    margin-bottom: 12px;
  }
}



/* wpdiscuzコメントプラグイン */

.wpd-follow-link.wpd_not_clicked.wpd-follow{
	display:none!important;
}

.wpd-comment-label{
	display:none!important;
}

div.wpd-comment-share.wpd-hidden.wpd-tooltip.wpd-top{
		display:none!important;
}
div.wpd-form-head{
	display:none!important;
}

#wpd-threads > div.wpd-thread-head{
	display:none;
}

/* 通知リストのスタイル */
.my-custom-notifications {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.my-custom-notifications li {
    border-bottom: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 5px;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
    display: flex; /* Flexboxレイアウトを適用 */
    align-items: center; /* アイテムを中央揃え */
    justify-content: space-between; /* アイテム間のスペースを均等に分ける */
}

.my-custom-notifications a {
    text-decoration: none;
    color: #f5f5f5;
    display: flex; /* Flexboxレイアウトを適用 */
    align-items: center; /* アイテムを中央揃え */
}

.my-custom-notifications a:hover {
    color: #0073aa;
}

.p-postList__title {
    font-weight: bold;
    color: #0073aa;
    margin-right: 5px;
}

.comment-link {
    background: #eee;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none; /* 下線を消す */
}

.comment-link:hover {
    background: #313131;
    color: #FFF;
}

.comment-link span, .comment-link img {
    margin-right: 10px; /* アバターとテキストの間隔 */
}

/* お気に入りボタンのスタイル */
.simplefavorite-button.preset {
  /* 基本レイアウト */
  display: inline-block;
  width: 100%;
  max-width: 800px;
  margin: 10px auto 20px;
  padding: 15px 20px;
  
  /* 見た目のデザイン */
  background-color: white !important;
  color: #0a98a8 !important; /* テキスト色を水色に合わせたダークカラー */
  border: 2px solid #aae5ec !important; /* 指定された水色 */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(170, 229, 236, 0.25); /* 影の色も水色系に */
  
  /* テキストのスタイル */
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  
  /* アイコンの位置調整 */
  position: relative;
  padding-left: 40px;
  
  /* アニメーション効果 */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* ホバー時のエフェクト */
.simplefavorite-button.preset:hover {
  transform: translateY(-3px);
  background-color: #f0fafc !important; /* 水色の薄いバージョン */
  box-shadow: 0 6px 15px rgba(170, 229, 236, 0.35);
}

/* アクティブ時（クリック時）のエフェクト */
.simplefavorite-button.preset:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(170, 229, 236, 0.2);
}

/* お気に入りアイコンのスタイル */
.simplefavorite-button.preset .sf-icon-favorite {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #aae5ec; /* アイコン色も水色に */
  transition: transform 0.3s ease, color 0.3s ease;
}

/* ホバー時のアイコンアニメーション */
.simplefavorite-button.preset:hover .sf-icon-favorite {
  transform: translateY(-50%) scale(1.2);
  color: #0a98a8; /* ホバー時は少し濃い色に */
}

/* お気に入り済み状態のスタイル */
.simplefavorite-button.active {
  background-color: #aae5ec !important; /* 水色背景 */
  color: white !important;
}

.simplefavorite-button.active .sf-icon-favorite {
  color: white; /* アクティブ時のアイコンは白に */
}

/* モバイル対応 */
@media (max-width: 600px) {
  .simplefavorite-button.preset {
    padding: 12px 15px 12px 35px;
    font-size: 14px;
  }
  
  .simplefavorite-button.preset .sf-icon-favorite {
    left: 15px;
    font-size: 16px;
  }
}


/* お気に入りリストのスタイル */
ul.favorites-list {
  /* 基本レイアウト */
  max-width: 800px;
  margin: 20px auto;
  padding: 0;
  list-style-type: none;
}

/* リストのアイテム */
ul.favorites-list li {
  margin-bottom: 10px;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 3px 10px rgba(170, 229, 236, 0.15);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* ホバー時のエフェクト */
ul.favorites-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(170, 229, 236, 0.3);
}

/* リストアイテム内のpタグをリセット */
ul.favorites-list li p {
  margin: 0;
  padding: 0;
}

/* リンクのスタイリング */
ul.favorites-list li a {
  display: block;
  padding: 16px 20px;
  color: #0a98a8;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  padding-left: 45px;
  transition: color 0.3s ease;
}

/* リンクホバー時の色 */
ul.favorites-list li a:hover {
  color: #007b8a;
}

/* お気に入りアイコンを追加 */
ul.favorites-list li a::before {
  content: "\f004"; /* FontAwesomeのハートアイコン */
  font-family: 'Font Awesome 5 Free', sans-serif;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #aae5ec;
  font-size: 16px;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* リンクホバー時のアイコンアニメーション */
ul.favorites-list li a:hover::before {
  transform: translateY(-50%) scale(1.2);
  color: #0a98a8;
}

/* お気に入りがない場合のテキスト */
ul.favorites-list:empty::after {
  content: "No Favorites";
  display: block;
  text-align: center;
  padding: 20px;
  color: #999;
  font-style: italic;
  background-color: #f8f9fa;
  border-radius: 12px;
  margin-top: 10px;
}

/* モバイル対応 */
@media (max-width: 600px) {
  ul.favorites-list li a {
    padding: 14px 14px 14px 40px;
    font-size: 14px;
  }
  
  ul.favorites-list li a::before {
    left: 15px;
    font-size: 14px;
  }
}