body.common .contents {
    max-width: 1340px;
}
#jobs > h1 {
    display: flex;
    font-size: 4em;
}
#jobs > h1 > .contents {
    display: flex;
    flex-direction: column;
    font-size: 0.5em;
}
#jobs > h1 > .contents:before {
    content: '';
    font-size: 2.5em;
    text-indent: -.15em;
    line-height: 1.1em;
}
#jobs > div {
    margin-bottom: 0;
    padding: 0;
}
#jobs > div img {
    max-width: 100%;
}
#jobs section {
    display: flex;
    margin: 0;
    margin-bottom: 3em;
    padding: 3em 0;
}
#jobs section:nth-child(even) {
    background: #f2fafd;
}
#jobs section .contents{
    display: grid;
    grid-template: 
        "photo   title  " 2em
        "photo   desc   " auto
        "photo   message" auto /
        1fr      1fr
    ;
    gap: 1em 3em;
    margin: 0 auto;
    margin-bottom: 6em;
}
#jobs section .contents> h3 {
    grid-area: title;
    font-size: 1.5em;
    margin-top: -0.5em;
}
#jobs section .contents> img {
    grid-area: photo;
}
#jobs section .contents> p {
    grid-area: desc;
}
#jobs section .contents> p > span {
    margin-left: 1em;
    display: inline-block;
}
#jobs section .contents> .message {
    grid-area: message;
}
#jobs section .contents> .message h4 {
    margin: 0;
    background: #5496c8;
    color: white;
    margin-bottom: 1em;
    padding: 0 1em;
}
#jobs section .contents> .message:empty,
#jobs section .contents> .message:not(:has(a))::after {
    /*display: none;*/
    content: 'coming soon・・・';
}
#jobs section .contents> .message ul {
    list-style: none;
}
#jobs section .contents> .message img {
    max-height: 5em;
}
#jobs section .contents> .message img:hover {
    box-shadow: none;
    transform: none;
}
#jobs section .contents> .message .employee {
    display: inline-block;
    display: inline-grid;
    margin: 0;
    margin-right: 0.5em;
    grid-template:
        "photo job  " 1fr
        "photo name " 1fr
        "photo since" 1fr /
        100px  1fr
    ;
}
#jobs section .contents> .message .photo {
    border-radius: 50%;
    box-shadow: 3px 3px 10px #ccc;
    overflow: hidden;
    width: 90px;
    height: 90px;
    grid-area: photo;
    transition:
        0.25s border-radius ease,
        0.25s box-shadow ease;
}
#jobs section .contents> .message .employee:focus .photo,
#jobs section .contents> .message .employee:hover .photo {
    border-radius: 8px;
    box-shadow: none;
}
#jobs section .contents> .message .photo > img{
    background: none;
    display: block;
    transform: scale(1.2);
    transform-origin: center top;
}
#jobs section .contents> .message .name {
    grid-area: name;
    display: inline-block;
}
#jobs section .contents> .message .since {
    grid-area: since;
}
#jobs section .contents> .message .jobs {
    grid-area: job;
    display: none;
}
#jobs section .contents> .message .name,
#jobs section .contents> .message .since,
#jobs section .contents> .message .jobs {
    font-size: 14px;
}

@media screen and (max-width: 500px) {
    #jobs > h1 > .contents {
        text-align: center;
    }
    #jobs section .contents{
        grid-template:
            "title  " 2em
            "photo  " auto
            "desc   " auto
            "message" auto /
            1fr
        ;
        margin-bottom: 0;
    }
    #jobs section .contents> .message .employee {
        margin: auto;
    }
}