/*
 * Tailwind CSS クラス競合の上書きルール
 *
 * 既存 CSS（style.min.css）は非 layered で読み込むため Tailwind より優先されるが、
 * display 等のプロパティが既存 CSS 側で明示されていない場合は Tailwind の値が有効になる。
 * ここで明示的に上書きする。
 */

/* .contents: Tailwind の display:contents を上書き */
/* 元の用途: #single-news article section .contents { width:100%; ... } */
.contents { display: block; }

/* スティッキーフッター: コンテンツが少ないページでも空白を残さずフッターをビューポート下端に寄せる */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* mobile のアドレスバー分を動的に考慮 */
}
body > main {
  flex: 1;
}

/* PAGE TOP ボタン（VK プラグイン CSS の代替実装） */
:root {
  --ver_page_top_button_url: url("/images/to-top-btn-icon.svg");
}

.page_top_btn {
  position: fixed;
  right: 2%;
  bottom: 3%;
  z-index: 99999;
  width: 40px;
  height: 38px;
  color: transparent;
  border: none;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 0 2px rgba(0, 0, 0, 0.8);
  background-image: var(--ver_page_top_button_url);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s;
  text-decoration: none;
}

.page_top_btn:hover {
  color: transparent;
  text-decoration: none;
  transition: opacity 0.3s;
}

.scrolled .page_top_btn {
  opacity: 1;
  color: transparent;
}