/* 全体のスタイル */
body {
    margin: 0;
    padding: 0;
    background-color: #d3d3d3;
}

/* コンテナのスタイル */
.container {
    max-width: 640px;
    margin: 0 auto;
    background-color: transparent;
    font-size: 0; /* ホワイトスペースを無効化 */
}

/* 画像のスタイル */
.lp-image {
    width: 100%;
    height: auto;
    display: block;
    font-size: 16px; /* 子要素で戻す */
}

/* モザイクセクション全体 */
.mosaic-section {
    width: 100%;
    font-size: 0; /* モザイク内の隙間も削除 */
}

/* モザイク画像とクリア画像のスタイル */
.mosaic-wrapper {
    width: 100%;
    position: relative;
    display: block;
    font-size: 16px;
}

/* モザイクとクリア画像 */
.mosaic, .clear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

/* 画像ボタンのスタイル */
.mosaic-button {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 640px;
    cursor: pointer;
    filter: brightness(1) contrast(1.1);
    transition: opacity 0.3s ease;
}

/* Googleマップのスタイル */
.map-wrapper {
    position: relative;
    width: 100%;
    font-size: 0; /* マップ内の隙間も削除 */
}

.map-wrapper a {
    display: block;
}

.google-map {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: calc(600px * 13 / 20);
    max-width: 100%;
    z-index: 10;
}

/* スマホサイズでの調整 */
@media (max-width: 640px) {
    .container {
        max-width: 100%;
        font-size: 0; /* スマホでも隙間を確実に削除 */
    }
    .mosaic-button {
        max-width: 100%;
    }
    .google-map {
        bottom: 70px;
        width: 100%;
        height: calc(100vw * 8 / 13);
    }
    .mosaic-section {
        font-size: 0; /* スマホでも適用 */
    }
    .map-wrapper {
        font-size: 0; /* スマホでも適用 */
    }
}