/* ========================================
   トップに戻るボタン
   ======================================== */
#back-to-top {
    position: fixed;
    bottom: 32px;
    right: 28px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 9000;

    /* 初期は非表示 */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#back-to-top:hover {
    transform: translateY(-3px);
}

/* ---- SVGリング ---- */
.btt-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 背景の角丸四角（薄いグレー） */
.btt-ring-bg {
    fill: #ffffff;
    stroke: #e0e0e0;
    stroke-width: 2;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}

/* プログレスリング（黒） */
.btt-ring-bar {
    fill: none;
    stroke: #111111;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* 開始位置を上辺中央に */
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 0.1s linear;
}

/* ---- 矢印アイコン ---- */
.btt-arrow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    transition: color 0.2s ease;
}

.btt-arrow svg {
    width: 20px;
    height: 20px;
}

/* ホバー時に矢印を緑に */
#back-to-top:hover .btt-arrow {
    color: #2c5530;
}

#back-to-top:hover .btt-ring-bar {
    stroke: #2c5530;
}

/* モバイル */
@media (max-width: 480px) {
    #back-to-top {
        bottom: 20px;
        right: 16px;
        width: 46px;
        height: 46px;
    }
}