/* back-to-top.css */
/* 「トップに戻る」ボタン。トップページでは右下固定CTAの2ボタンの右に並べ、
   下層ページでは単体で右下に常時固定表示する（.back-to-top--pageを付与） */
.back-to-top {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 6px;
    background: #fff;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.back-to-top:hover {
    background: #f0f0f0;
}

/* アイコン素材(icon-arrow-up.svg)は右向き矢印なので、-90deg回転させて上向きにする。
   外側の箱は回転後の見た目サイズ(縦長)、::beforeは回転前の素材そのままのサイズ(横長)にして
   中央に配置してから回転させる（pagination矢印と同じ手法） */
.back-to-top__icon {
    position: relative;
    display: block;
    width: 15.901px;
    height: 28.5102px;
}

.back-to-top__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28.5102px;
    height: 15.901px;
    background-color: #000;
    -webkit-mask-image: url('../../images/icon-arrow-up.svg');
    mask-image: url('../../images/icon-arrow-up.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* 下層ページ用：ホームのfloating-ctaと違いフェード表示は無く、常時右下に固定表示する。
   position:stickyなのはトップページのfloating-ctaと同じ理由
   （.page-content内で使うことで、スクロール量に関係なく必ずフッター手前で止まる） */
/* margin-left:autoは.page-contentが通常のブロック要素であることを前提にした右寄せ。
   coming-soon.css側で.page-contentがflex(column)化されるページでは効かないため、
   align-self:flex-endでも右寄せを保証する（flexコンテナでない場合は無視されるだけで害はない） */
/* widthは指定しない：buttonはブロック要素と違って元々fit-contentの挙動なので不要な上、
   ここで指定すると.back-to-top本体のwidth:58pxと詳細度が同じで衝突し、
   アイコン幅まで潰れてしまう */
.back-to-top--page {
    position: sticky;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    margin-left: auto;
    align-self: flex-end;
}

/* back-to-top--pageは.page-contentの最後の子要素のため、そのままだとスクロールが
   フッター手前に到達した瞬間にボタンとフッターが余白なく接触してしまう。
   stickyの解除後も同じだけ余白が残るよう、.page-content自体にもbottom offset分の
   padding-bottomを足しておく */
.page-content:has(> .back-to-top--page) {
    padding-bottom: 24px;
}

/* 782px〜1279px：PC版(1366px基準)のサイズ感をvwでそのまま縮小 */
@media (max-width: 1279px) {
    .back-to-top {
        width: 4.246vw;
        height: 4.246vw;
        border-radius: 0.439vw;
    }

    .back-to-top__icon {
        width: 1.164vw;
        height: 2.087vw;
    }

    .back-to-top__icon::before {
        width: 2.087vw;
        height: 1.164vw;
    }

    .back-to-top--page {
        right: 1.757vw;
        bottom: 1.757vw;
    }

    .page-content:has(> .back-to-top--page) {
        padding-bottom: 1.757vw;
    }
}

/* 375px(Figmaスマホ実測値)基準：782pxまでvwで滑らかに拡大縮小する。48px相当 */
@media (max-width: 782px) {
    .back-to-top {
        width: 12.8vw;
        height: 12.8vw;
        border-radius: 1.324vw;
    }

    .back-to-top__icon {
        width: 3.51vw;
        height: 6.295vw;
    }

    .back-to-top__icon::before {
        width: 6.295vw;
        height: 3.51vw;
    }

    .back-to-top--page {
        /* rightはトップページの.mobile-fixed-cta-wrap .back-to-top(margin-right:2.133vw)と揃える */
        right: 2.133vw;
        bottom: 4.267vw;
    }

    .page-content:has(> .back-to-top--page) {
        padding-bottom: 4.267vw;
    }
}