/* -----------------------------------
 * 固定ボタンの共通スタイル
 * ----------------------------------- */
#fixed-buttons {
    /* 画面右下に固定表示 */
    position: fixed;
    bottom: 20px;       /* 画面下端からの距離 */
    right: 20px;        /* 画面右端からの距離 */
    /* ボタンを縦に並べる（TOPが下、フィードバックが上になるように） */
    display: flex;
    flex-direction: column;
    gap: 10px;          /* ボタン間のスペース */
    z-index: 1000;      /* 他の要素より手前に表示 */
}

/* 共通のボタンデザイン - TOPボタンの基本スタイルを流用 */
.top-btn {
    /* TOPボタンは円形を維持 */
    display: block;
    width: 93px;
    height: 93px;
    line-height: 93px; 
    text-align: center;
    border-radius: 50%; 
    font-weight: bold;
    font-size: 14px;
    text-decoration: none; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transition: transform 0.2s, opacity 0.3s;
    cursor: pointer;
    border: none; 
    color: white; 
}

/* -----------------------------------
 * 各ボタンの個別スタイル
 * ----------------------------------- */

/* フィードバックボタン（画像） */
.feedback-btn {
    /* 画像の寸法に合わせてサイズを設定 */
    width: 200px; /* 画像の幅に合わせて調整 */
    height: 95px; /* 画像の高さに合わせて調整 */
    
    /* 背景に画像を設定 */
    background-image: url('https://www.flpj.co.jp/images/btn_feed.png');
    background-size: contain; /* 画像全体が表示されるように調整 */
    background-repeat: no-repeat;
    background-position: left;
    background-color: transparent; /* 背景色を透明に */
    
    /* リンクとして機能させるための設定 */
    display: block;
    text-indent: -9999px; /* テキスト（今回は空ですが、念のため隠す） */
    cursor: pointer;
    box-shadow: none; /* 画像自体に影があるため削除 */
    border-radius: 0; /* 画像に合わせた四角形 */
    transition: transform 0.2s, opacity 0.3s;
}

/* TOPに戻るボタン*/
.top-btn {
    background-color: #ffcc00; 
    order: 1; /* feedback-btnより下に配置 */
}

/* ホバーエフェクト */
.feedback-btn:hover,
.top-btn:hover {
    transform: translateY(-2px); /* 少し上に動かす */
    opacity: 0.85; /* 少し透明にしてホバーを表現 */
}

/* -----------------------------------
 * 【📱 モバイル用調整】メディアクエリ
 * ----------------------------------- */
@media (max-width: 600px) {
    /* 固定ボタンコンテナの位置調整 */
    #fixed-buttons {
        /* 中央揃えの解除 (right, left, transformをリセット) */
        left: unset; 
        
        /* 画面右端に配置 */
        right: 10px; /* 右端から10pxの余白 */
        bottom: 10px; /* 下端から10pxの余白 */
    }

    /* フィードバックボタンの幅を縮小し、TOPボタンと高さを合わせる */
    .top-btn,
    .feedback-btn {
        width: 90px;  /* TOPボタンと同じ幅 */
        height: 90px; /* TOPボタンと同じ高さ */
    }