/* ======================================= */
/* ファイル名: back-to-top.css - jQuery不要版 (文字矢印対応) */
/* ======================================= */

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

/* 2. ボタン全体を画面右下に固定するスタイル */
.page-top-wrapper {
    position: fixed; 
    right: 20px; 
    bottom: 20px;
    z-index: 9999; 

    /* 初期状態は表示位置は保持しつつ透明化 */
    display: flex;          /* display:none から flex に変更 */
    opacity: 0;             /* 透明にして非表示 */
    pointer-events: none;   /* 非表示時はクリック無効 */
    transition: opacity 0.3s; /* フェードイン・アウト効果 */
}

/* 3. ボタン自体のデザイン */
.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: background-color 0.3s;

    /* 矢印文字のスタイル */
    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; /* 少し暗くする */
}

/* 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;
    }
}