body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 902px;
    width: 100%;
    padding: 60px 0; /* 上下の余白を追加 */
}

.text-section {
    margin-bottom: 20px;
}

.text-section p {
    color: #1E0669;
    font-size: 152px;
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    line-height: 0.7; /* 行間隔をさらに詰める */
    letter-spacing: -0.08em; /* 文字間隔をさらに詰める */
    text-align: center;
    margin: 0;
}

.image-section {
    margin-bottom: 20px;
}

.app-mockup {
    max-width: 60%;
    height: auto;
}

.button-section {
    margin-top: 20px;
}

.app-store-button {
    display: inline-block;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
}

.button-text {
    display: flex;
    flex-direction: column;
}

.small-text {
    font-size: 12px;
}

.large-text {
    font-size: 20px;
    font-weight: 500;
}

@media (min-width: 769px) {
    .content-wrapper {
        padding: 8
        0px 0; /* パソコン表示の場合、さらに余白を増やす */
    }

    .app-mockup {
        max-width: 20%;
    }

    .app-store-button {
        padding: 12px 24px;
    }

    .small-text {
        font-size: 14px;
    }

    .large-text {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .text-section p {
        font-size: 76px;
        line-height: 0.7; /* モバイル表示でも同じ行間隔を適用 */
        letter-spacing: -0.08em; /* モバイル表示でも同じ文字間隔を適用 */
    }
}