@import url("base/variables.css");
@import url("base/typography.css");
/* @import url("base/reset.css"); */ /* もし使うなら */
@import url("pages/home.css");
@import url("pages/product.css");
/* 他のページ用CSSがあればここに追加 */

@import url("layout/general.css");
@import url("layout/header.css");
@import url("layout/navigation.css");
@import url("layout/footer.css");
@import url("components/swiper.css");
@import url("components/buttons.css");

/* ページトップへ戻るボタン */
.scroll-top-btn {
   position: fixed;
   bottom: 30px; /* フッターとの距離を少し増やす */
   right: 30px; /* 右からの距離も少し増やす */
   background-color: rgba(51, 51, 51, 0.8); /* 少し透明度を持たせる */
   color: white;
   width: 45px; /* 幅と高さを指定して円形に近づけることも可能 */
   height: 45px;
   text-align: center;
   line-height: 45px; /* アイコンを中央揃え */
   border-radius: 50%; /* 円形にする場合 */
   text-decoration: none;
   font-size: 20px; /* アイコンサイズ */
   display: none; /* 初期状態は非表示 */
   z-index: 9999; /* 他の要素より手前に表示 */
   cursor: pointer;
   transition: background-color 0.3s, opacity 0.3s, transform 0.3s; /* transformも追加 */
   opacity: 0.8; /* 通常時の透明度を少し上げる */
}

.scroll-top-btn:hover {
   background-color: rgba(85, 85, 85, 1); /* ホバー時は不透明に */
   opacity: 1;
   transform: translateY(-2px); /* ホバー時に少し浮き上がるエフェクト */
}

/* 上向き矢印のスタイル（テキストではなくSVGやFont Iconを使う場合は不要） */
.scroll-top-btn::before {
   content: '\2191'; /* Unicodeの上向き矢印 */
   display: inline-block; /* transformを適用するため */
}

/* 他の共通コンポーネントがあればここに追加 */