/* 基本のリセットと背景設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px 0;
    overflow-x: hidden;
}

/* コンテナ設定 */
.container {
    width: 100%;
    max-width: 640px; /* 見やすさを考慮したPCでの最大幅 */
    padding: 10px;
    animation: fadeIn 1.2s ease-out;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 画像ラッパー */
.flyer-wrapper {
    position: relative;
    width: 100%;
    line-height: 0; /* 画像の下の隙間を消す */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

/* チラシ画像自体のスタイル */
.flyer-image {
    width: 100%;
    height: auto;
    display: block;
}

/* リンクオーバーレイ（予約ボタン部分） */
.booking-overlay {
    position: absolute;
    
    /* 
       画像サイズ 1536x4000 に対するボタンの位置とサイズを計算
       計測値（目安）: 
       Y: ~1705px / 4000px = 42.6%
       X: ~168px / 1536px = 10.9%
       Width: ~1200px / 1536px = 78.1%
       Height: ~255px / 4000px = 6.3%
    */
    top: 42.6%; 
    left: 11%;
    width: 78%;
    height: 6.3%;
    
    cursor: pointer;
    background: rgba(255, 255, 255, 0); /* 通常時は透明 */
    transition: background-color 0.3s ease, border 0.3s ease;
    border-radius: 40px; /* ボタンの角丸に合わせる */
    z-index: 10;
}

/* ホバー時の視覚的フィードバック（オプション） */
.booking-overlay:hover {
    /* ホバーした時に、クリックできることがわかるよう、わずかにハイライトさせます */
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
}

/* スマホ向けの微調整 */
@media screen and (max-width: 480px) {
    body {
        padding: 0;
    }
    .container {
        padding: 0;
    }
}