/*
Theme Name: makadasu
Version: 1.0
*/


/* =========================
   Page Top Button (トップへ戻る)
========================= */
.pageTopBtn {
    /* ▼ 位置設定：下のボタン(30px+80px=110px) + 余白20px = 130px */
    position: fixed;
    right: 20px;
    /* 下のボタン(right:20px)と縦のラインを揃える */
    bottom: 130px;
    z-index: 50;

    /* ▼ サイズを下のボタンと同じにする */
    width: 65px;
    height: 65px;

    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    /* お好みで border: none; でもOK */
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, background 0.3s;

    /* 初期状態 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* 矢印のマーク（ボタンが大きくなったので少し大きく） */
.pageTopBtn::before {
    content: "";
    width: 14px;
    /* 10px -> 14px に変更 */
    height: 14px;
    /* 10px -> 14px に変更 */
    border-top: 3px solid #333;
    /* 線を少し太く */
    border-right: 3px solid #333;
    transform: rotate(-45deg);
    margin-top: 6px;
    /* 重心調整 */
}

/* ホバー時 */
.pageTopBtn:hover {
    background: #f9f9f9;
    transform: translateY(-5px);
}

/* =========================
   Floating Button
  ========================= */
.floatingBtn {
    position: fixed;
    right: 20px;
    /* 右端からの距離 */
    bottom: 50px;
    /* 下端からの距離 */
    z-index: 50;
    /* 最前面に表示 */

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* ボタンのサイズ（お好みで調整） */
    width: 65px;
    height: 65px;
    border-radius: 50%;
    /* 丸くする */

    /* デザイン（サイトのテーマカラーに合わせました） */
    background: var(--yellow, #E9C85B);
    color: #000;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;

    /* 影をつけて浮いてる感を出す */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    /* アニメーション用：初期状態は隠す */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    /* 少し下に置いておく */
}

/* ホバー時の動き */
.floatingBtn:hover {
    transform: translateY(0) scale(1.05);
    /* 少し大きく */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

/* =========================
    Z-Index制御（GSAPエリアをボタンより上にする）
    ========================= */
.hscroll__pin {
    /* ボタン(z-index:50)よりも強い数値を指定して上に重ねる */
    position: relative;
    z-index: 100 !important;

    /* 背景色がないと透けてボタンが見えてしまうため、必ず指定 */
    background: var(--yellow, #E9C85B);
}