/* ========================

            各ページ        

====================== */

.pageTopImg-erea {
    background-image: url(../img/bg-page.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1166 / 391;

    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 3.5rem;
}

.pageDescription {
    background-color: #ececec;
    padding: 40px;
    margin: 0px 32px;
}

.flowTitleErea {
    padding-left: 30vw;
}


.flowContent {
    margin: 80px 80px 40px 80px;
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
}

.flowContent2 {
    align-items: flex-start;

}

.flowContent .imgFlowErea {
    aspect-ratio: 500 / 375;
    min-width: 40%;
}

.flowContent .imgFlowErea img {
    width: 100%;
}

.flowContent .text {
    max-width: 500px;
    line-height: 2rem;
    letter-spacing: 0.02rem;
}

.gaiyou .yokonarabi-vhCenter {
    align-items: stretch;
    /* ★重要：中身の高さに関わらず子要素の高さを揃える */
}

.gaiyou .title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.gaiyou .price {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.gaiyou .text {
    text-align: center;
    letter-spacing: 0.03em;
    line-height: 1.5rem;
}


.greenErea {
    margin: 80px 40px;
    padding: 32px;
    /* サイズ指定 */
    width: 40vw;
    /* 背景グラデーション設定 */
    /* 角度: -92deg, 色と位置を指定 */
    background: linear-gradient(180deg, #8ffca0 0%, #ffffff 74%, #c3ecf6 100%);
    /* ボーダー設定 */
    border: 3px solid #4af0b7;
    /* 角丸設定 */
    border-radius: 10px;
    /* 中身が空でも見えるように最低限の高さ（必要に応じて調整してください） */
    height: auto;
}

.pinkErea {
    margin: 80px 40px;
    padding: 32px;
    /* サイズ指定 */
    width: 40vw;
    /* 背景グラデーション設定 */
    /* 角度: -92deg, 色と位置を指定 */
    background: linear-gradient(180deg, #eeafe3 0%, #ffffff 74%, #f9ecb4 100%);
    /* ボーダー設定 */
    border: 3px solid #ff7be8;
    /* 角丸設定 */
    border-radius: 10px;
    height: auto;
}


.gaiyou .responsive-table {
    margin-top: 16px;
}

.flowContent .btnsErea {
    margin-top: 24px;
}


/* タブレット縦向きを強調する場合 */
@media (min-width: 768px) and (max-width: 1024px) {

    .flowContent .imgFlowErea {
        width: 250px;
    }

}



/* レスポンシブ */
@media (max-width: 768px) {

    .pageTopImg-erea {
        background-image: url(../img/bg-sp-page.jpg);
        aspect-ratio: 375 / 263;
    }

    .pageDescription {
        padding: 40px;
        margin: 0px 16px;
    }

    .flowContent {
        gap: 40px;
        display: grid;
        margin: 32px 16px;
    }

    .flowContent .imgFlowErea {
        max-width: 100%;
    }

    .yokonarabi-vhCenter {
        display: grid;
        justify-content: center;
    }

    .flowTitleErea {
        padding-left: 24px;
    }


    .greenErea {
        margin: 80px 16px;
        padding: 32px;
        width: auto;
    }

    .pinkErea {
        margin: 0px 16px 80px 16px;
        padding: 32px;
        width: auto;
    }

}