#area09:before {content: "駄菓子屋 映菓座";}
#area08:before {content: "レトロ駅舎";}
#area07:before {content: "大魔神像";}
#area06:before {content: "たぬき堂書店";}
#area05:before {content: "麺類・丼物 美濃屋";}
#area04:before {content: "キネマ・キッチン";}
#area03:before {content: "三吉稲荷神社";}
#area02:before {content: "京つけもの もり";}
#area01:before {content: "髙津商会";}

/* --- 2. ポップアップ（モーダル）のスタイル --- */
        .modal-open-link { /* (名前を button -> link に変更) */
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            text-decoration: none; /* 下線を消す */
            display: inline-block; /* <a>タグにpaddingを効かせるため */
            margin: 3px;
        }
        .modal-open-link:hover { background-color: #0056b3; }

        .modal-container {
            display: none; 
            position: fixed; 
            z-index: 1000;
            left: 0; top: 0;
            width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.6); 
            display: none; 
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #ffffff;
            width: 90%;
            /*max-width: 600px;*/
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            position: relative;
            padding: 20px;
            box-sizing: border-box;
            max-height: 90vh;
            overflow: hidden; 
        }

        .modal-close-button {
            position: absolute;
            top: 10px; right: 15px;
            font-size: 28px;
            font-weight: bold;
            color: #888;
            cursor: pointer;
            line-height: 1;
        }
        .modal-close-button:hover { color: #000; }

        /* --- 3. カルーセルのスタイル --- */
        /* (カルーセル関連のCSSは変更なし - 省略) */
        .carousel { position: relative; overflow: hidden; }
        .carousel-inner { display: flex; transition: transform 0.5s ease; }
        .carousel-slide { min-width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 70vh;}
        .carousel-slide img {
            /* 親コンテナ(.carousel-slide)の幅と高さを超えない */
            max-width: 100%;
            max-height: 100%; /* ( .carousel-slide の height: 300px が上限になる ) */
            
            /* * アスペクト比を保ったまま、コンテナに収まるように表示する
             * これにより、縦長の画像も横長の画像もはみ出さずに収まります。
             */
            object-fit: contain; 
            
            /* 念のため（多くのブラウザでは不要ですが） */
            width: auto;
            height: auto;
        }
        .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.4); color: white; border: none; cursor: pointer; padding: 12px; font-size: 20px; z-index: 10; user-select: none; }
        .prev { left: 10px; border-radius: 5px 0 0 5px; }
        .next { right: 10px; border-radius: 0 5px 5px 0; }
        .carousel-nav:hover { background-color: rgba(0, 0, 0, 0.7); }