#message {
    background:url(../up_load_files/freetext/company_message/img/wall.jpg) center / cover;
    padding-top:calc(var(--section-space) * 2);
    padding-bottom:calc(var(--section-space) * 2);
}
#message article {
    margin-left:24vw;
}
#message article h1 {
    font-size:2.2em;
    font-weight:normal;
    color:var(--color-white);
    margin:0;
    white-space: nowrap;
    text-shadow: var(--shadow);
}
#message article p {
    color:var(--color-white);
    margin-top:0;
    margin-block-start: var(--margin);
    text-shadow: var(--shadow);
}

#detail .president {
    width:18vw;
    translate: 0 -200px;
    position:absolute;
}
#detail figure {
    border-radius:var(--radius-inner);
}
#detail dl {
    margin-left:24vw;
}
#detail dl div {
    border-bottom:solid 1px var(--color-lightgray);
}
#detail dl dt {
    width:6em;
}
#detail dl dd {
    flex:1;
}
#detail dl dd h3 {
    font-size:1em;
}
#detail dl dd ul + h3 {
    margin-top:10px;
}
#detail dl dd ul {
    margin-top:0;
}
#detail dl dd ul li {
    font-size:0.9em;
}

.foot-image {
    height:300px;
    overflow: hidden;
    margin:var(--margin);
    margin-top:var(--section-space);
}
.foot-image img {
    width:100%;
    height:100%;
    object-fit: cover;
}


@media (max-width : 1020px) {
    #message article {
        margin-left:0;
    }
}
@media (max-width : 920px) {
    #detail .president {
        width:300px;
        translate: 0 -100px;
        position:relative;
        margin-left:auto;
        margin-right:auto;
    }
    #detail dl {
        margin-left:0;
        margin-top:-50px;
    }
}
@media (max-width : 520px) {
    #message article h1 {
        font-size:1.8em;
    }
    #detail .president {
        width:200px;
        translate: 0 -60px;
    }
    #detail dl div {
        flex-direction: column;
        gap:0;
    }
}