@charset "utf-8";

/* ==========================================================================
   ファイル名: back-to-top.css - Petit Maison KIRISHIMA Serenity Edition
   - 霧島の森に溶け込む、控えめながらも気品あるデザイン
   - メニュー展開時は視覚的ノイズを排除するため完全非表示
   - Noto Serif JPの世界観を壊さないミニマルな矢印
   ========================================================================== */

/* 1. スムーズスクロールの有効化 */
html {
  scroll-behavior: smooth;
}

/* 2. ボタン全体を画面右下に固定するスタイル (JS連動型) */
.page-top-wrapper {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 90; 
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

/* JSでスクロール量に応じて付与されるクラス */
.page-top-wrapper.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- ハンバーガーメニュー展開時は「物理的に消去」 --- */
body.is-menu-open .page-top-wrapper,
body:has(.is-menu-open) .page-top-wrapper,
#js-header.is-menu-open ~ .page-top-wrapper,
.is-menu-open .page-top-wrapper {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 3. ボタン自体のデザイン (a.page-top-btn) */
.page-top-btn {
  width: 50px;
  height: 50px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: var(--color-bg-base); /* 清潔感のある白背景 */
  border: 1px solid var(--color-primary); /* 霧島グリーンの細い縁取り */
  border-radius: 50%; /* 正円にすることで柔らかな印象へ */
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(26, 61, 50, 0.1);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* 矢印の配置：極細のラインで表現 */
.page-top-btn::before {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--color-primary);
  border-left: 1px solid var(--color-primary);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: 0.4s;
}

/* マウスが使える環境（PCなど）でのみホバーを有効化 */
@media (hover: hover) and (pointer: fine) {
  /* ホバー時の演出：霧島グリーンへ静かに反転 */
  .page-top-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(26, 61, 50, 0.15);
  }

  .page-top-btn:hover::before {
    border-color: var(--color-accent); /* ホバー時はシャンパンゴールドへ */
    top: 45%; /* 上へ吸い込まれるような微細な動き */
  }
}

/* 4. モバイル対応 */
@media (max-width: 768px) {
  .page-top-wrapper {
    right: 20px;
    bottom: 20px;
  }
  
  .page-top-btn {
    width: 44px;
    height: 44px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  .page-top-btn::before {
    width: 8px;
    height: 8px;
    top: 54%;
  }
}