/* ========================================
   月次法要 確認画面
======================================== */


/* =========================
   全体
========================= */

.monthly-memorial-confirm {

    max-width: 900px;

    margin: 0 auto;

    padding: 60px 20px;

}


.monthly-memorial-confirm__title {

    margin-bottom: 20px;

    color: #333;

    font-size: 32px;

    font-weight: 600;

    text-align: center;

}


.monthly-memorial-confirm__lead {

    margin-bottom: 40px;

    color: #666;

    line-height: 1.8;

    text-align: center;

}



/* =========================
   ボックス
========================= */

.monthly-memorial-confirm__box {

    padding: 32px;

    margin-bottom: 24px;

    background: #fff;

    border: 1px solid #e8e1d4;

    border-radius: 12px;

}



.monthly-memorial-confirm__heading {

    padding-bottom: 14px;

    margin: 0 0 20px;

    color: #333;

    font-size: 20px;

    font-weight: 600;

    border-bottom: 1px solid #e8e1d4;

}



/* =========================
   項目一覧
========================= */

.monthly-memorial-confirm__list {

    margin: 0;

}



.monthly-memorial-confirm__item {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 16px 0;

    border-bottom: 1px solid #eee;

}



.monthly-memorial-confirm__item:last-child {

    border-bottom: none;

}



.monthly-memorial-confirm__item dt {

    color: #555;

    font-weight: 600;

}



.monthly-memorial-confirm__item dd {

    margin: 0;

    color: #333;

    text-align: right;

}



/* =========================
   商品
========================= */


.monthly-memorial-confirm__products {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.monthly-memorial-confirm__product {

    padding: 20px;

    background: #faf8f3;

    border-radius: 8px;

}



.monthly-memorial-confirm__product-name {

    margin: 0 0 16px;

    color: #333;

    font-size: 18px;

    font-weight: 600;

}



.monthly-memorial-confirm__product-detail {

    margin: 0;

}



.monthly-memorial-confirm__product-detail > div {

    display: flex;

    justify-content: space-between;

    padding: 8px 0;

}



.monthly-memorial-confirm__product-detail dt {

    color: #666;

}



.monthly-memorial-confirm__product-detail dd {

    margin: 0;

}



/* =========================
   合計金額
========================= */


.monthly-memorial-confirm__total {

    text-align: center;

    background: #f9f2df;

}



.monthly-memorial-confirm__total p {

    margin: 0;

}



.monthly-memorial-confirm__total strong {

    color: #a0782c;

    font-size: 36px;

}



/* =========================
   ボタン
========================= */


.monthly-memorial-confirm__submit-form {

    margin-top: 40px;

}



.monthly-memorial-confirm__buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

}



.monthly-memorial-confirm__submit-button {

    min-width: 240px;

    padding: 16px 30px;

    font-size: 16px;

    font-weight: 600;

    border: none;

    border-radius: 999px;

    cursor: pointer;

    transition: .3s ease;

}



/* 修正 */

.monthly-memorial-confirm__back-button {

    color: #555;

    background: #eee;

}



.monthly-memorial-confirm__back-button:hover {

    background: #ddd;

}



/* 送信 */

.monthly-memorial-confirm__submit-button:not(.monthly-memorial-confirm__back-button) {

    color: #fff;

    background: #b28a3e;

}



.monthly-memorial-confirm__submit-button:not(.monthly-memorial-confirm__back-button):hover {

    opacity: .8;

}



/* =========================
   スマホ
========================= */


@media screen and (max-width: 767px) {


    .monthly-memorial-confirm {

        padding: 40px 16px;

    }



    .monthly-memorial-confirm__title {

        font-size: 26px;

    }



    .monthly-memorial-confirm__box {

        padding: 20px;

    }



    .monthly-memorial-confirm__item {

        display: block;

    }



    .monthly-memorial-confirm__item dd {

        margin-top: 8px;

        text-align: left;

    }



    .monthly-memorial-confirm__buttons {

        flex-direction: column;

    }



    .monthly-memorial-confirm__submit-button {

        width: 100%;

    }


}