/* CSS Document */





.box01_ver02 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.box01_ver02-inner {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column-reverse;
}

.box01_ver02-inner-item01 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: calc( 80 * 100vw / 375 ) min( 5.333vw, 24px );
}
.box01_ver02-inner-item01 .txt--ttl {
    text-align: center;
}
.box01_ver02-inner-item01 .txt--main {
    text-align: center;
}

.box01_ver02-inner-item02 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.box01_ver02-inner-item02 figcaption {
    position: absolute;
    top: 100%;
    right: 0;
    color: #333;
    padding-inline: 1em;
    padding-block: 0.5em;
}

.box01_ver02-item03 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: calc( 70 * 100vw / 375 ) 0;
    width: 100%;
    margin: 0;
    padding: calc( 70 * 100vw / 375 ) 0 calc( 80 * 100vw / 375 );
    background-color: #362E1D;
}
.box01_ver02-item03 > figure {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.box01_ver02-item03 > figure figcaption {
    padding-inline: 1em;
    padding-block: 0.5em;
    position: absolute;
    bottom: 0;
    left: 0;
}
.box01_ver02-item03 > div {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 min( 5.333vw, 24px );
}
.box01_ver02-item03 .txt--main, 
.box01_ver02-item03 .txt--sub {
    color: #fff;
}
.box01_ver02-item03 .txt--main {
    text-align: center;
}
.box01_ver02-item03 .txt--sub {
}

.box01_ver02-item04 {
    position: relative;
}
.box01_ver02-item04 figcaption {
    padding-inline: 1em;
    padding-block: 0.5em;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media screen and (min-width: 769px) {

    .box01_ver02 {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .box01_ver02-inner {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .box01_ver02-inner-item01 {
        position: relative;
        width: 40.74%;
        margin: 0;
        padding: 0 0 0 min( calc( 100 * 100vw / 1388 ), 100px );
    }
    .box01_ver02-inner-item01 .txt--ttl {
        text-align: left;
    }
    .box01_ver02-inner-item01 .txt--main {
        text-align: left;
    }

    .box01_ver02-inner-item02 {
        position: relative;
        width: 59.26%;
        margin: 0;
        padding: 0;
        z-index: 2;
    }
    .box01_ver02-inner-item02 figcaption {
        position: absolute;
        top: auto;
        bottom: 0;
        right: 0;
        padding-inline: 1em;
        padding-block: 0.5em;
        color: #fff;
    }

    .box01_ver02-item03 {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        width: 100%;
        margin: calc( min( calc( 220 * 100vw / 1388 ), 220px ) * -1 ) 0 0;
        padding: min( calc( 275 * 100vw / 1388 ), 275px ) 0 min( calc( 160 * 100vw / 1388 ), 160px );
        background-color: #362E1D;
    }
    .box01_ver02-item03 > figure {
        position: relative;
        width: 48.91%;
        margin: 0;
        padding: 0;
    }
    .box01_ver02-item03 > figure figcaption {
        padding-inline: 1em;
        padding-block: 0.5em;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .box01_ver02-item03 > div {
        position: relative;
        width: 51.09%;
        margin: 0;
        padding: 0 min( calc( 100 * 100vw / 1388 ), 100px );
    }
    .box01_ver02-item03 .txt--main, 
    .box01_ver02-item03 .txt--sub {
        color: #fff;
    }
    .box01_ver02-item03 .txt--main {
    }
    .box01_ver02-item03 .txt--sub {
    }

    .box01_ver02-item04 {
        position: relative;
    }
    .box01_ver02-item04 figcaption {
        padding-inline: 1em;
        padding-block: 0.5em;
        position: absolute;
        bottom: 0;
        right: 0;
    }

}



















/*

.facade .box01

*/
@media screen and (min-width: 769px) {
    .facade .box01 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }
}


@media screen and (min-width: 769px) {
    .facade .item01 {
        width: 100%;
        max-width: min(85.591vw, 1425.6px);
    }
}







/*

.facade .item02

*/
.facade .item02 figcaption {
    bottom: auto;
    top: 100%;
}
@media screen and (min-width: 769px) {
}










/*

.facade .item04

*/
.facade .item04 {
    position: relative;
}
.facade .item04 figcaption {
    padding-inline: 1em;
    padding-block: 0.5em;
    position: absolute;
    bottom: 0;
    right: 0;
}
@media screen and (min-width: 769px) {
    .facade .item04 figcaption {
        padding-block: 0.5em;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}