@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

.bridal{ margin: 0 auto; width: 700px; letter-spacing: normal; font-weight: 500; font-size: 18px; font-family: "Noto Serif JP", serif; line-height: 1;}
.bridal img{ max-width: none; width: 100%;}

@media only screen and (max-width: 768px) {
    .bridal{ margin: 0; padding: 0 4vw; width: 100%; font-size: 3.733333333vw;}
}

.bridal h2{ display: flex; flex-direction: column;}
.bridal h2 span{ display: flex; width: 100%; height: 50px; background: #ea5283; color: #fff; font-weight: 700; font-size: 22px; justify-content: center; align-items: center; text-align: center;}
.bridal h3{ margin: 75px 0 0; border-bottom: 1px solid #666; color: #ea5283; font-weight: 700; font-size: 36px; line-height: 1.5;}
.bridal h3 + p{ margin: 1em 0 0; font-size: 16px; line-height: 1.75;}

@media only screen and (max-width: 768px) {
    .bridal h2 span{ height: auto; padding: .5em 0; font-size: 4.266666667vw; line-height: 1.5;}
    .bridal h3{ margin: 16vw 0 0; border-bottom: 0.266666667vw solid #666; font-size: 8vw;}
    .bridal h3 + p{ font-size: 3.733333333vw;}
}

.bridal .dl1{ margin: 0 auto; width: 90%;}
.bridal .dl1 > dt{ position: relative; margin: 60px 0 0; padding: 0 0 .5em; border-bottom: 1px solid #ddd; color: #ea5283; font-weight: 700; font-size: 18px;}
.bridal .dl1 > dt i{ position: absolute; right: 0; bottom: -25px; display: flex; width: 50px; height: 50px; border-radius: 100%; background: #ea5283; color: #fff; font-style: normal; font-size: 18px; justify-content: center; align-items: center;}
.bridal .dl1 > dd{ padding: 30px 0 0;}
.bridal .dl1 .lead1{ margin: 0 0 1em; font-weight: 700; font-size: 18px; line-height: 1.75;}
.bridal .dl1 p{ font-size: 14px; line-height: 1.75;}
.bridal .dl1 .flex{ display: flex; flex-direction: row-reverse; justify-content: space-between;}
.bridal .dl1 .flex > figure{ width: 40%;}
.bridal .dl1 .flex > p{ padding: 0 1.5em 0 0; width: 60%;}
.bridal .dl1 ul{ margin: 1em 0 0 1em; font-size: 14px;}
.bridal .dl1 ul > li{ list-style: disc; line-height: 1.5;}

@media only screen and (max-width: 768px) {
    .bridal .dl1{ margin: 0; width: 100%;}
    .bridal .dl1 > dt{ margin: 12vw 0 0; border-bottom: 0.266666667vw solid #ddd; font-size: 4.8vw;}
    .bridal .dl1 > dt i{ bottom: -5.333333333vw; width: 10.66666667vw; height: 10.66666667vw; font-size: 4.266666667vw;}
    .bridal .dl1 > dd{ padding: 6vw 0 0;}
    .bridal .dl1 .lead1{ font-size: 3.733333333vw; line-height: 1.7;}
    .bridal .dl1 p{ font-size: 3.2vw; line-height: 1.75;}
    .bridal .dl1 .flex{ flex-direction: column; justify-content: flex-start;}
    .bridal .dl1 .flex > figure{ width: 100%;}
    .bridal .dl1 .flex > p{ padding: 1.5em 0 0; width: 100%;}
    .bridal .dl1 ul{ margin: 1em 0 0 1em; font-size: 3.2vw;}
    .bridal .dl1 ul > li{ list-style: disc; line-height: 1.5;}
}

.bridal .dl2{ margin: 75px 0 0; padding: 60px; border: 1px solid #666;}
.bridal .dl2 > dt{ font-size: 24px;}
.bridal .dl2 > dd{ padding: 30px 0 0; font-size: 16px; line-height: 1.75;}
.bridal .dl2 > dd .btn1{ margin: 1em 0 0; text-align: right;}

@media only screen and (max-width: 768px) {
    .bridal .dl2{ margin: 16vw 0 0; padding: 5.333333333vw; border: 0.266666667vw solid #666;}
    .bridal .dl2 > dt{ font-size: 4.8vw;}
    .bridal .dl2 > dd{ padding: 4vw 0 0; font-size: 3.2vw; line-height: 1.75;}
    .bridal .dl2 > dd .btn1{ margin: 1em 0 0; text-align: right;}
}