.intro{
    width: 784px;
    margin: -20px auto 0px auto;
}
.container{
    flex-direction: column;
    width:1040px;
    margin:auto;
}
@media screen and (max-width: 768px){
    #contents{padding:40px 0px}
    .intro{
        width:calc(100% - 50px);
        margin:10px auto 20px auto;
    }
    .container{width:calc(100% - 50px);}
}

.restaurant-wedding{
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap:60px;
}
.restaurant-wedding .img-box{
    display: flex;
    width: 400px;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
}
.restaurant-wedding .text-box{
    display: flex;
    width: 580px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}
.restaurant-wedding .text-box > h2{
    position: relative;
    z-index: 2;
    width: 758px;
    margin: 20px 0px 0px -180px;
}
.restaurant-wedding .text-box > p{
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
}
.restaurant-wedding .sub-img{
    display: flex;
    align-items: center;
    gap: 40px;
    align-self: stretch;
}
.restaurant-wedding .sub-img-sp{display:none;}
.restaurant-wedding .text-box h3{
    font-family: ChicagoFLF;
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
}
.restaurant-wedding .text-box h3 > span{
    display: block;
    font-family: "Noto Sans JP";
    margin:10px 0px 0px 0px;
    font-size: 15px;
    font-weight: 500;
    line-height: 15px;
}
.restaurant-wedding .pacage-plans{margin:-20px 0px 0px 0px;}
@media screen and (max-width: 768px){
    .restaurant-wedding{
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        align-self: stretch;
    }
    .restaurant-wedding .img-box{width: 100%;}
    .restaurant-wedding .img-box .img2{display:none;}
    .restaurant-wedding .text-box{
        width: 100%;
        gap:30px;
    }
    .restaurant-wedding .text-box > h2{
        width:100%;
        margin:-35px 0px 0px 0px;
    }
    .restaurant-wedding .sub-img{gap:10px;}
    .restaurant-wedding .sub-img-sp{display: block;}
    .restaurant-wedding .text-box h3{font-size: 18px;}
    .restaurant-wedding .text-box h3 > span{
        font-size: 14px;
        margin:5px 0px 0px 0px;
    }
    .restaurant-wedding .pacage-plans{margin: 0px;}
}

.wedding-benefits{
    display: flex;
    align-items: center;
    gap: 40px;
}
.wedding-benefits .text-box{width: 400px;}
.wedding-benefits .text-box > h2{
    position: relative;
    z-index: 2;
    width: 640px;
    margin: 0px 0px 40px 0px;
}
.wedding-benefits .text-box p{
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
}
.wedding-benefits .img-box{
    width: 600px;
    height: 350px;
    flex-shrink: 0;
}
.wedding-benefits .img-box-sp{display:none;}
@media screen and (max-width: 768px){
    .wedding-benefits{
        flex-direction: column;
        align-items: center;
        gap: 30px;
        width: 100%;   
    }
    .wedding-benefits .text-box{width:100%;}
    .wedding-benefits .text-box > h2{
        width: 100%;
        margin:0px;
    }
    .wedding-benefits .img-box-sp{
        width: 100%;
        display: block;
        margin:0px 0px 30px 0px;
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
    .wedding-benefits .img-box-sp img{
        width: 100%;
        display: block;
    }
    .wedding-benefits .img-box{display:none;}
}

.stella-penelope{
    display: flex;
    align-items: center;
    gap: 40px;
    margin:-20px 0px 0px 0px;
}
.stella-penelope .info1{
    width: 640px;
    height: 200px;
    flex-shrink: 0;
}
.stella-penelope .info2{
    width: 360px;
    height: 200px;
    flex-shrink: 0;
}
@media screen and (max-width: 768px){
    .stella-penelope{
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding:0px 0px 20px 0px;
        margin:0px;
    }
    .stella-penelope .info1{
        width: 100%;
        height: auto;
    }
    .stella-penelope .info2{
        width: 100%;
        height: auto;
    }
}

.support{margin:-20px auto 0px auto;}
.support-box{
    display: flex;
    align-items: center;
    gap: 60px;
}
.support-box .img-box{
    width: 580px;
    height: 430px;
    flex-shrink: 0;
}
.support-box .text-box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 400px;
}
.support-box .text-box p{
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
}
.support-box .wedding-link{
    width: 360px;
    height:70px;
}
@media screen and (max-width: 768px){
    .support-box{
        flex-direction: column;
        gap: 20px;
        align-items: center;
        align-self: stretch;
    }
    .support-box .img-box{
        width:100%;
        height: auto;
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
    .support-box .img-box img{width:100%;}
    .support-box .text-box{
        width: 100%;
        gap: 30px;
    }
    .support-box .wedding-link{
        width:100%;
        height: auto;
    }
}