/*   イメージビューワー   */

    /* 1. 背景を暗くして全画面表示にする */
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: #5a5a5a; /* 暗い背景色 */
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        /*  overflow: hidden;スクロールバーを隠す */
        font-family: sans-serif;
    }

 
    /* 2. 画像コンテナ（画面中央） */
    .viewer-container {
        position: relative;
        max-width: 90%;
        max-height: 90%;
    }

    .viewer-container img {
        max-width: 100%;

        border: 2px solid #333;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }

    /* 3. ボタンの基本スタイル */
    .btn {
        position: absolute;

        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        border: none;
        padding: 15px 20px;
        cursor: pointer;
        font-size: 14px;
        text-decoration: none;
        transition: background 0.3s;
        border-radius: 45px;
    }

    .btn:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

    /* Prevボタン（左） */
    .prev { left: -20px; }
    
    /* Nextボタン（右） */
    .next { right: -20px; }
    

    /* Back（戻る）ボタン（左上） */
    .back-btn {
        position: fixed !important;
        top: 20px;
        left: 20px;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        padding: 10px 15px;
        text-decoration: none;
        border-radius: 35px;
        z-index: 1;
    }
    
    
    /* 左上のキャプション部分 */
	.caption-text {
  position: fixed; /* 位置を画面に固定 */
  top: 100px;       /* 上から100pxの場所 */
  left: 20px;     /* 左から20pxの場所 */
  z-index: 5;   /* 他の要素より上に表示する */
  font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.8);
}    
    
/*    画面サイズが768を超える場合に画像が大きくなりすぎないようにする（メディアクエリ）    */
@media screen and (min-width:768px) {
.viewer-container {
width: 70vw;
}
}