.flex{
    display: flex;
    flex-wrap: wrap;
}

body{
    background: #eae8e2;
}


main {
    margin: 0 auto;
    text-align: center;
    overflow-x: hidden;
    width: 100%;
}
section {
    margin-bottom: 70px;
    width: 100%;
    box-sizing: border-box;
}
section img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

section.design-main {
    position: relative;
    margin-bottom: 0px;
}
section.design-main img{
    width: 100%;
    aspect-ratio: 2.1428;
    object-fit: cover;
}
section.design-main p{
    position: absolute;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Garamond Premier Pro', 'EB Garamond', serif;
    font-size: 42px;
    letter-spacing: 3rem;
    width: 100%;
    text-align: center;
}
section.design-main .line{
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    height: 18vw;
    width: 1px;
    background: #fff;
    z-index: 2;
}
section.design-main .caption{
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
    font-size: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    z-index: 2;
}

section.intro{
    background: url(../../assets/images/intro_line.svg) center top / auto 55px no-repeat;
    padding: 40px 0 70px;
    position: relative;
    margin: 0;
}
section.intro:before{
    content: "";
    display: block;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
    background: rgba(207,206,193,0.3);
}
section.intro .section-title{
    font-size: 24px;
    line-height: 2.44;
    font-weight: 700;
    letter-spacing: .38em;
    color: #231815;
    padding: 30px 0;
}
section.intro .intro-image{
    width: 100%;
    max-width: 1200px;
    margin: 10px auto 0;
}
section.intro .intro-image img{
    aspect-ratio: 1.3654;
    object-fit: cover;
    object-position: bottom;
}
section.intro .intro-blc.facade{
    gap: 30px 60px;
    max-width: 1200px;
    margin: 85px auto 0;
    width: 90%;
    align-items: flex-start;
    text-align: left;
}
section.intro .intro-blc.facade p{
    width: calc(100% - 670px);
    font-size: 13px;
    letter-spacing: .15em;
    line-height: 1.8;
}
section.intro .intro-blc.facade h3{
    width: 140px;
    color: #a48b78;
    font-size: 26px;
    letter-spacing: .26em;
    line-height: 1.75;
}
section.intro .intro-blc.facade h4{
    width: 410px;
    font-size: 21px;
    line-height: 1.8;
    letter-spacing: .32em;
}
section.intro .intro-blc.detail{
    gap: 70px 75px;
    max-width: 1200px;
    width: 90%;
    margin: 78px auto 0;
}
section.intro .intro-blc.detail > *{
    width: calc((100% - 75px) / 2);
}
section.intro .intro-blc.detail > *.x2{
    width: 100%;
}
section.intro .intro-blc.detail .flex{
    gap: 30px 45px;
}
section.intro .intro-blc.detail .flex .img{
    width: 740px;
}
section.intro .intro-blc.detail .flex .txt{
    width: calc(100% - 785px);
}
section.intro .intro-blc.detail .txt{
    position: relative;
    text-align: left;
}
section.intro .intro-blc.detail .txt h4{
    font-size: 16px;
    line-height: 2.5;
    letter-spacing: .26em;
}
section.intro .intro-blc.detail .txt p{
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.33em;
}
section.intro .intro-blc.detail .txt .note{
    font-size: 10.5px;
    position: absolute;
    bottom: 0;
    left: 0;
}
section.intro .intro-blc.ataka{
    margin: 100px auto 0;
    padding: 80px 0;
    border-top: 1px solid #aba893;
    border-bottom: 1px solid #aba893;
}
section.intro .intro-blc.ataka .flex{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    gap: 35px;
}
section.intro .intro-blc.ataka .flex .blc1{
    width: 170px;
    font-size: 15.7px;
    line-height: 2.3;
    letter-spacing: 0.15em;
}
section.intro .intro-blc.ataka .flex .blc1 p{
    font-size: 26px;
    line-height: 1;
    letter-spacing: .51em;
    padding-left: .41em;
}
section.intro .intro-blc.ataka .flex .blc1 img{
    margin-top: 20px;
    mix-blend-mode: multiply;
}
section.intro .intro-blc.ataka .flex .blc2{
    flex: 1;
    font-size: 17px;
    line-height: 2;
    letter-spacing: 0.19em;
    text-align: left;
    padding: 0 10px 0 0;
}
section.intro .intro-blc.ataka .flex .blc3{
    width: 157px;
    font-size: 10px;
    line-height: 1.5;
    text-align: left;
}
section.intro .intro-blc.ataka .flex .blc4 img,
section.intro .intro-blc.ataka .flex .blc5 img,
section.intro .intro-blc.ataka .flex .blc3 img{
    margin-bottom: 5px;
}
section.intro .intro-blc.ataka .flex .blc3 P + img{
    margin-top: 20px;
}
section.intro .intro-blc.ataka .flex .blc4,
section.intro .intro-blc.ataka .flex .blc5{
    width: 205px;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

section.landplan{
    padding: 125px 0 85px;
    background: #f4f4ef;
    margin: 0;
}
section.landplan .title-blc{
    gap: 30px 75px;
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
    text-align: left;
}
section.landplan .title-blc h3{
    width: 187px;
    color: #a48b78;
    font-size: 26px;
    letter-spacing: .26em;
    line-height: 1.75;
}
section.landplan .title-blc p{
    width: calc(100% - 262px);
    font-size: 21px;
    line-height: 1.8;
    letter-spacing: .4em;
}
section.landplan .landplan-image{
    align-items: center;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    gap: 24px;
}
section.landplan .landplan-image .img{
    width: calc(100% - 287px);
}
section.landplan .landplan-image .txt{
    width: 263px;
    text-align: left;
    position: relative;
    font-size: 12.6px;
    line-height: 1.65;
    letter-spacing: .11em;
    padding: 170px 0;
}
section.landplan .landplan-image .sub_img{
    margin: 1em 0;
}
section.landplan .landplan-image .txt p{
    font-size: 14px;
    line-height: 1.75;
}
section.landplan .landplan-image .txt dt{
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 15px;
}
section.landplan .landplan-image .txt dd + dt{
    margin: 50px 0 15px;
}
section.landplan .landplan-image .txt .note{
    position: absolute;
    bottom: 0;
    left: 0;
}
section.landplan .landplan-image .img img{
    mix-blend-mode: multiply;
}
section.landplan .green-blc{
    align-items: flex-end;
    max-width: 1200px;
    width: 90%;
    margin: 30px auto 0;
    gap: 24px;
}
section.landplan .green-blc .img{
    width: 570px;
}
section.landplan .green-blc .title-blc.bottom{
    width: calc(100% - 594px);
    max-width: unset;
    margin: 0;
    padding: 0 24px 0 0;
}
section.landplan .green-blc .title-blc.bottom h3{
    width: 100%;
}
section.landplan .green-blc .title-blc.bottom p{
    width: 100%;
    margin: 32px 0 0;
}
section.landplan .green-blc .title-blc.bottom p.small{
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: .23em; 
    margin: 31px 0 0;
}
section.landplan .green-blc .flower{
    width: 140px;
}
section.landplan .green-blc .flower p{
    text-align: right;
    font-size: 13px;
    line-height: 2;
}
section.landplan .green-blc + .note{
    max-width: 1200px;
    width: 90%;
    margin: 30px auto 0;
    text-align: right;
    font-size: 13px;
    letter-spacing: 0.1em;
}

section.commons{
    padding: 50px 0 0;
    background: #eae8e2;
}
section.commons .title-blc{
    gap: 30px 75px;
    max-width: 1200px;
    width: 90%;
    margin: 85px auto 0;
    text-align: left;
}
section.commons .title-blc h3{
    width: 187px;
    color: #a48b78;
    font-size: 26px;
    letter-spacing: .26em;
    line-height: 1.75;
}
section.commons .title-blc > div{
    width: calc(100% - 812px);
    font-size: 21px;
    line-height: 1.8;
    letter-spacing: .4em;
}
section.commons .title-blc .detail{
    margin: 0;
    width: 470px;
}
section.commons .title-blc .txt{
    margin: 30px 0 0;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: .23em;
}
section.commons .title-blc .detail .img{
    width: 470px;
}
section.commons .title-blc .detail .img .note{
    text-align: right;
    font-size: 13px;
    letter-spacing: 0.1em;
}


/* スマホ向けのメディアクエリ */
@media screen and (max-width: 1200px) {
    section.commons .title-blc > div {
        width: calc(100% - 262px);
    }
    section.commons .title-blc .detail {
        width: 100%;
        padding: 0 0  0 262px;
    }
}


/* スマホ向けのメディアクエリ */
@media screen and (max-width: 768px) {
    section.design-main p {
        font-size: 4rem;
        letter-spacing: 1rem;
    }
    section.intro .section-title{
        font-size: 17px;
    }
    section.commons .title-blc,
    section.intro .intro-blc.detail,
    section.intro .intro-blc.facade{
        margin: 50px auto 0;
    }
    section.commons .title-blc .detail > *,
    section.commons .title-blc > *,
    section.landplan .green-blc > *,
    section.landplan .title-blc > *,
    section.intro .intro-blc.facade > *{
        width: 100% !important;
    }
    section.commons .title-blc h4,
    section.landplan .green-blc p,
    section.landplan .title-blc p,
    section.intro .intro-blc.facade h4{
        font-size: 16px;
        font-weight: 500;
    }
    section.landplan .title-blc p{
        letter-spacing: .25em;
    }
    section.landplan .green-blc p.small,
    section.intro .intro-blc.facade p{
        font-size: 12px;
    }
    section.landplan .landplan-image > *,
    section.intro .intro-blc.detail .flex .txt,
    section.intro .intro-blc.detail .flex .img,
    section.intro .intro-blc.detail > *{
        width: 100% !important;
    }
    section.intro .intro-blc.detail{
        gap: 30px 70px;
    }
    section.intro .intro-blc.detail .flex .txt .note{
        bottom: unset;
        left: unset;
        right: 0;
        top: -20px;
    }
    section.intro .intro-blc.ataka .flex{
        gap: 30px 20px;
    }
    section.intro .intro-blc.ataka .flex .blc1{
        width: 100%;
        flex: unset;
    }
    section.intro .intro-blc.ataka .flex .blc1 img{
        width: 100%;
        max-width: 200px;
        margin: 20px auto 0;
    }
    section.intro .intro-blc.ataka .flex .blc4,
    section.intro .intro-blc.ataka .flex .blc5{
        width: calc(( 100% - 20px ) / 2);
    }
    section.intro .intro-blc.ataka .flex .blc2{
        width: 65%;
        font-size: 15px;
        padding: 0;
        flex: unset;
    }
    section.intro .intro-blc.ataka .flex .blc3{
        width: calc( 35% - 20px );
    }
    section.landplan .landplan-image .txt{
        padding: 0;
    }
    section.landplan .landplan-image .txt dd + dt{
        margin: 30px 0 10px;section.landplan .landplan-image .txt dd + dt
    }
    section.landplan .landplan-image .txt .note{
        bottom: unset;
        left: unset;
        right: 0;
        top: -20px;
    }
    section.landplan .green-blc{
        margin: 75px auto 0;
    }
    section.landplan .green-blc .img{
        order: 2;
    }
    section.landplan .green-blc .title-blc{
        padding: 0 !important;
        order: 1;
    }
    section.landplan .green-blc .flower{
        order: 3;
    }
    section.landplan .green-blc + .note{
        margin: 0px auto 0;
    }
    section.commons .title-blc .detail{
        padding: 0;
    }
}