/* ======================================= */
/* ファイル名: back-to-top.css - 最終解決版 (文字矢印対応) */
/* ======================================= */

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

/* 2. ボタン全体を画面右下に固定するスタイル */
.page-top-wrapper {
    position: fixed; 
    right: 20px; 
    bottom: 20px;
    z-index: 9999; 
    /* display: none; は削除します */
    opacity: 0;             /* 最初は透明にする */
    pointer-events: none;   /* 透明なときはクリックできないようにする */
    transition: opacity 0.3s; /* ふわっと表示させるアニメーション */
}

/* 3. ボタン自体のデザイン (a.page-top-btn) */
.page-top-btn {
    width: 50px; 
    height: 50px; 
    
    /* ★★★ 中央寄せを強制 ★★★ */
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;    
    
    background-color: #c7a956; /* 茶色系の背景色 */
    border-radius: 10px; 
    text-decoration: none;
    transition: opacity 0.3s;
    
    /* Font Awesomeの代わりに、文字の矢印のスタイルを直接適用 */
    color: #ffffff !important; /* 白の矢印 */
    font-size: 1.5rem !important; /* 矢印のサイズを調整 */
    font-weight: bold !important; /* 矢印を太くする */
    line-height: 1 !important; /* 垂直方向の中央寄せを補助 */
    font-family: Arial, sans-serif !important; /* 汎用的なフォントで文字化けを防ぐ */
}

/* ホバー時の色 (任意で変更) */
.page-top-btn:hover {
    background-color: #b19349; /* ホバー時に少し暗い色にする */
    opacity: 1; /* opacity 0.8 は解除し、色で変化を出す */
}

/* 4. モバイル対応 */
@media (max-width: 767px) {
    .page-top-wrapper {
        right: 10px; 
        bottom: 10px;
    }
    
    .page-top-btn {
        width: 40px; 
        height: 40px;
        border-radius: 8px; 
        font-size: 1.2rem !important; /* 文字サイズもモバイル向けに縮小 */
    }
}