/* /wp-content/themes/deer_child/assets/css/blog-top-main.css */

/* 親要素の制約を解除（Blog Compassページ専用） */
.page-id-887 .post,
.page-id-887 #content,
.page-id-887 #contentInner,
.page-id-887 #wrapper,
.page-id-887 main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Breadcrumb要素のマージンを追加（780px以上のみ） */ 
@media (min-width: 781px) {
  .page-id-887 #breadcrumb {
    margin-top: 40px;
    position: relative;
  }
}

/* カテゴリータイトル・もっと見るの文字色を変更 */
.page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a {
  color: #ffffff !important; /* 白に変更 */
}

/* 下線をすべて削除 */
.page-id-887 .dorim-compass-section a,
.page-id-887 .dorim-compass-section a:hover,
.page-id-887 .post-card a,
.page-id-887 .post-card a:hover,
.page-id-887 .post-card h5,
.page-id-887 .post-card h5:hover,
.page-id-887 .post-card p,
.page-id-887 .post-card p:hover {
  text-decoration: none !important;
}

/* サイドバーを完全に非表示 */
#side {
  display: none !important;
}

/* カテゴリーボタンを中央寄せ */
.page-id-887 .dorim-compass-section .wp-block-buttons:first-child {
  justify-content: center;
}

/* 「もっと見る」ボタンを右下に配置 */
.page-id-887 .dorim-compass-section .wp-block-buttons:last-child {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

/* 「もっと見る」ボタンのコンパクト化調整 */
.page-id-887 .dorim-compass-section .wp-block-buttons:last-child .wp-block-button a {
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* dorim-compassセクションの外側余白調整 */
.page-id-887 .dorim-compass-section {
  padding: 20px 15px; /* 左右に適度な余白 */
  margin-bottom: 40px;
  background: none;
  box-shadow: none;
}

/* カテゴリータイトルをボタン風にスタイリング */
.page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff !important;
  transition: transform 0.3s;
}

.page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

/* 共通スタイル調整（クリスタル調） */
.page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a {
  color: #ffffff !important;
  font-weight: bold;
  padding: 15px 35px;
  border-radius: 50px;
  font-size: 18px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px); /* ガラス感を強調 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2), inset 0 4px 10px rgba(255,255,255,0.3);
  transition: transform 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
  text-shadow: 
  0px 0px 6px rgba(0,0,0,0.9), 
  0px 0px 8px rgba(0,0,0,0.7);
}

/* カテゴリーと「もっと見る」ボタンを少し透明にする */
.page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a {
  opacity: 0.9; /* 透明度を調整（0が完全透明、1が完全不透明） */
}

/* ホバー時に透明度を変化させる効果を強化 */
.page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a:hover {
  opacity: 0.8; /* ホバー時にもう少し透明度を上げる */
}

/* Tales - ゴールド（クリスタル調・透明） */
.page-id-887 .dorim-compass-section.category-tales .wp-block-buttons .wp-block-button a {
  background-image: linear-gradient(120deg, rgba(255,215,0,0.6), rgba(228,182,5,0.5), rgba(255,240,160,0.4), rgba(184,134,11,0.5));
}

/* Tech - シルバー（クリスタル調・透明） */
.page-id-887 .dorim-compass-section.category-tech .wp-block-buttons .wp-block-button a {
  background-image: linear-gradient(120deg, rgba(224,224,224,0.6), rgba(192,192,192,0.5), rgba(245,245,245,0.4), rgba(169,169,169,0.5));
}

/* Triangulation - ローズピンク（クリスタル調・透明） */
.page-id-887 .dorim-compass-section.category-triangulation .wp-block-buttons .wp-block-button a {
  background-image: linear-gradient(120deg,
    rgba(244,194,194,0.6),
    rgba(210,162,162,0.5),
    rgba(255,220,220,0.4),
    rgba(183,110,121,0.5)
  );
}

/* Track - エメラルドグリーン（クリスタル調・透明） */
.page-id-887 .dorim-compass-section.category-track .wp-block-buttons .wp-block-button a {
  background-image: linear-gradient(120deg,
    rgba(0,201,87,0.6),
    rgba(0,143,63,0.5),
    rgba(100,255,180,0.4),
    rgba(0,122,51,0.5)
  );
}

/* メタリック共通アニメーション（滑らかなクリスタル効果） */
.page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a {
  background-size: 300% 300%;
  animation: crystalShine 7s ease infinite;
}

@keyframes crystalShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* hover時の効果を強化 */
.page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.3), inset 0 5px 12px rgba(255,255,255,0.5);
  backdrop-filter: blur(15px); /* ホバー時さらに透明度を強調 */
}

/* 最新の投稿をカード型で整列表示 */
.page-id-887 .post-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 25px;
}

/* 投稿カードのデザイン調整（左右余白追加） */
.page-id-887 .post-card {
  flex: 1 1 calc(33% - 20px); /* 幅を調整し余白を加味 */
  max-width: calc(33% - 20px);
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.page-id-887 .post-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.page-id-887 .post-card h5 {
  font-size: 16px;
  padding: 10px;
  margin: 0;
}

/*カード本文*/
.page-id-887 .post-card p {
  font-size: 14px;
  color: #555;
  padding: 0 10px 10px;
  line-height: 1.3;
}

/* レスポンシブ対応（スマホ） */
@media (max-width: 768px) {
  .page-id-887 .post-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .page-id-887 .dorim-compass-section .wp-block-buttons .wp-block-button a {
    width: 90%;
  }
}
