/* 戻るボタン：背景から浮き立たせるデザイン */
.back-button {
    align-self: flex-start; 
    display: inline-flex;
    align-items: center;
    
    margin: 15px 0 25px 10px; /* 左側に10pxの隙間 */
    padding: 8px 18px;
    
    /* デザイン：白背景＋薄い影で「浮かせる」 */
    background-color: #ffffff; /* グレー背景に対して白でコントラストを作る */
    color: #444 !important;    /* 文字色を少し濃くして読みやすく */
    border: none;             /* 枠線はあえて無し（または極薄） */
    border-radius: 8px;       /* 少しだけ丸みを持たせる */
    
    /* 影を追加して「押せる感」を出す */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* 矢印：少しだけ太くして視認性アップ */
.back-button::before {
    content: '‹';
    font-size: 1.2rem;
    margin-right: 6px;
    line-height: 0;
    color: #888; /* 矢印だけ少し薄くしてバランスをとる */
}

/* ホバー・タップ時の反応 */
.back-button:hover,
.back-button:active {
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* 影を強くして「浮いた」感じに */
    transform: translateY(-1px) translateX(-2px); /* 上と左に少し動く */
    color: #000 !important;
}