@charset "utf-8";

/*-----------------------------------
img
-----------------------------------*/
#img {
    height: 100%;
    aspect-ratio: 360 / 615;
    display: flex;
    align-items: center;
}
#img img {
    height: 61%;
    margin-top: 20%;
}
@media screen and (max-width:768px){
    #img {
        aspect-ratio: 340 / 535;
        justify-content: center;
        align-items: center;
    }
    #img img {
        height: 62%;
    }
}

/*-----------------------------------
message
-----------------------------------*/
#message {
    height: 100%;
    display: flex;
    align-items: center;
}
#message .img {
    height: 100%;
    aspect-ratio: 1428 / 1068;
}
#message .inner {
    display: flex;
}
#message .txt_area {
    height: 100%;
    aspect-ratio: 863 / 615;
    padding: 0 10dvh;
    display: flex;
    justify-content: space-between;
}
#message .txt_area .txt_box {
    width: calc(50% - 5dvh);
    height: 100%;
    padding-top: 7.5%;
}
#message .txt_em {
    font-size: 2.5dvh;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #5d8351;
    margin: 0 0 1em;
    white-space: nowrap;
}
#message .txt {
    font-size: 2dvh;
    line-height: 2em;
    letter-spacing: 0.05em;
}
#message .txt  + .txt_em {
    margin-top: 2.5em;
}
#message .txt + .txt {
    margin-top: 2.5em;
}
#message .img_area {
    height: 100%;
    aspect-ratio: 1427 / 1068;
    position: relative;
}
#message .img_area .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#message .img_area .txt_blk {
    width: 50%;
    height: 100%;
    padding: 6% 0 0 10dvh;
    color: #fff;
    position: relative;
    z-index: 2;
}
@media screen and (max-width:768px){
    #message .txt_area {
        aspect-ratio: 1428 / 1068;
        padding: 0 5dvh;
    }
    #message .img_area .txt_blk {
        padding: 6.5% 5dvh 0;
    }
}