#subMainVisual {
    position: relative;
    width: 100%;
    height: 60rem;
    background-image: url(../images/common/bg-sub-main-visual.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#subVisual .container {
    margin-top: 0 !important;
}
#subMainVisual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-black);
    opacity: 0.3;
    z-index: 1;
}
#subMainVisual p {
    position: absolute;
    bottom: 15rem;
    left: 50%;
    translate: -50% 0;
    font-size: 6.6rem;
    color: var(--clr-white);
    text-align: center;
    z-index: 2;
    width: max-content;
    max-width: 100%;
    word-break: keep-all;
}
#subMainVisual p strong {
    font-weight: 700;
}

main section .container .subContent strong.title {
    color: var(--clr-primary);
}

/* for modal */
.modal.index .content {
    display: grid;
    grid-template-columns: max-content minmax(0,1fr);
    column-gap: 4rem;
    /* row-gap: 2.5rem; */
    text-align: left;
}
.modal.index .content strong {
    font-size: max(14px,1.6rem);
    font-weight: 700;
    color: var(--clr-primary);
    margin-bottom: 2.5rem;
}
/* .modal.index .content p {
    font-size: 1.6rem;
    color: var(--clr-gray);
    display: flex;
} */
.modal.index .content a {
    font-size: max(12px,1.6rem);
    color: var(--clr-gray);
    /* display: flex; */
    height: max-content;
    width: max-content;
    max-width: 100%;
}
.modal.index .content strong:has(+ em) {
    grid-column: 1/-1;
}
.modal.index .content em {
    color: var(--clr-primary);
    font-style: normal;
    font-weight: 500;
    padding-left: 3rem;
    font-size: max(14px,1.6rem);
    margin-bottom: 1.5rem;
}
.modal.index .content em::before {
    content: '·';
}
.modal.index .content em:has(+ strong) {
    margin-bottom: 4.5rem;
}
.modal.index .content ul {
    display: grid;
    grid-template-columns: repeat(2,26rem);
    row-gap: 1.5rem;
    margin-bottom: 1.5rem;
}
@media only screen and (max-width : 1024px) {
    .modal.index .content {
        /* grid-template-columns: minmax(0,1fr); */
        row-gap: 2rem;
    }
    .modal.index .content strong,
    .modal.index .content em {
        margin-bottom: 0;
    }
    #motive .container,
    #newItem .container {
        grid-template-columns: minmax(0,50rem) minmax(0,93rem);
    }
}
@media only screen and (max-width : 767px) {
    .modal.index .content ul {
        grid-template-columns: minmax(0,1fr);
    }
    #motive .container,
    #newItem .container {
        grid-template-columns: minmax(0,1fr);
    }
    #newItem .container {
        row-gap: 3rem;
    }
}