.philosophyArea {
    display: flex;
    flex-flow: column;
    max-width: 813px;
    margin: auto;
    gap: 30px;
}
.philosophyArea .philosophyBox {
    border: 1px solid #006BB5;
    padding: 30px 50px;
    border-radius: 20px;
}
.philosophyArea .philosophyBox h4 {
    text-align: center;
    color: #006BB5;
}
.philosophyArea .philosophyBox p {
    text-align: center;
}
.list-num li {
    list-style-type: decimal;
}
button.js-modal-btn, button.modalBtn {
    border: none;
}
@media screen and (max-width: 768px) {
    .philosophyArea .philosophyBox {
        padding: 20px 30px;
        border-radius: 20px;
    }
    .philosophyArea .philosophyBox p {
        text-align: start;
    }
}

.caseCard {
    padding-bottom: 30px;
}
.caseLogoArea {
    height: 180px;
}
.caseLogo {
    max-height: 120px;
}

.modal {
    display: none; /* デフォルトでは非表示 */
    position: fixed; /* 画面に固定 */
    z-index: 100; /* 他の要素の上に表示 */
    left: 0;
    top: 0;
    width: 100%; /* 全幅 */
    height: 100%; /* 全高さ */
    overflow: auto; /* スクロール可能 */
    background-color: rgb(0,0,0); /* 背景色 */
    background-color: rgba(0,0,0,0.8); /* 透過 */
}
.modal:hover {
    background: rgba(0,0,0,0.8);
}

/* モーダルコンテンツ */
.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 中央に配置 */
    padding: 50px;
    border: 1px solid #888;
    width: 80%; /* 幅 */
    position: relative;
}
span.close {
    position: absolute;
    right: 0;
    top: -60px;
    color: #fff;
    font-size: 5rem;
    font-weight: 100;
}
.case-date {
    display: flex;
    flex-flow: column;
    gap: 50px;
    color: #231815;
    text-align: start;
    line-height: 1;
    font-weight: 400;
}
.case-date .case-date-com {
    display: flex;
    background: #F0F9FF;
    padding: 50px;
    border-radius: 20px;
    justify-content: space-between;
}
.case-date .case-date-com .case-date-com-logo {
    width: 13%;
}
.case-date .case-date-com .case-date-com-detail {
    width: 80%;
    display: flex;
    flex-flow: column;
    gap: 20px;
}
.case-date .case-date-com .case-date-com-detail dl {
    display: flex;
    gap: 40px;
}
.case-date .case-date-com .case-date-com-detail dl dt {
    color: #006bb5;
    width: 15%;
    text-align: start;
    font-weight: 700;
}
.case-date .case-date-com .case-date-com-detail dl dd {
    width: 80%;
    text-align: start;
}
.case-date .case-date-com .case-date-com-detail dl dd a {
    text-decoration: underline;
    margin: 0 0 0 20px;
    color: #006bb5;
}
.case-date .case-date-note {
    display: flex;
    flex-flow: column;
    gap: 30px;
}
.case-date .case-date-note h2 {
    color: #006bb5;
    font-weight: 700;
    line-height: 1.4;
}
.case-date .case-date-note p {
    line-height: 1.7;
}
.case-date .case-date-note .case-date-note-flex {
    display: flex;
    justify-content: space-between;
}
.case-date .case-date-note .case-date-note-flex dl {
    width: 48%;
    display: flex;
    flex-flow: column;
    gap: 30px;
}
.case-date .case-date-note .case-date-note-flex dl dd {
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .modal-content {
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 100%;
        position: relative;
    }
    .case-date {
        display: flex;
        flex-flow: column;
        gap: 50px;
        color: #231815;
        text-align: start;
        line-height: 1;
        font-weight: 400;
    }
    .case-date .case-date-com {
        display: flex;
        background: #F0F9FF;
        padding: 20px;
        border-radius: 20px;
        justify-content: center;
        flex-flow: column;
        align-items: center;
        gap: 30px;
    }
    .case-date .case-date-com .case-date-com-logo {
        width: 50%;
    }
    .case-date .case-date-com .case-date-com-detail {
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 20px;
    }
    .case-date .case-date-com .case-date-com-detail dl {
        display: flex;
        gap: 10px;
        flex-flow: column;
    }
    .case-date .case-date-com .case-date-com-detail dl dt {
        color: #006bb5;
        width: 100%;
        text-align: start;
        font-weight: 700;
    }
    .case-date .case-date-com .case-date-com-detail dl dd {
        width: 100%;
        text-align: start;
    }
    .case-date .case-date-com .case-date-com-detail dl dd a {
        text-decoration: underline;
        margin: 0;
        color: #006bb5;
    }
    .case-date .case-date-note {
        display: flex;
        flex-flow: column;
        gap: 20px;
    }
    .case-date .case-date-note h2 {
        color: #006bb5;
        font-weight: 700;
        line-height: 1.5;
        font-size: 2rem;
    }
    .case-date .case-date-note p {
        line-height: 1.7;
    }
    .case-date .case-date-note .case-date-note-flex {
        display: flex;
        justify-content: space-between;
        flex-flow: column;
        gap: 30px;
    }
    .case-date .case-date-note .case-date-note-flex dl {
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 30px;
    }
    .case-date .case-date-note .case-date-note-flex dl dd {
        line-height: 1.4;
    }
}

.topics a {
    width: 70%;
    display: block;
    margin: auto;
}

@media screen and (max-width: 768px) {
    .topics a {
        width: 100%;
    }
}

.pdf-limk {
    display: flex;
    justify-content: flex-end;
    width: 60%;
    gap: 10px 20px;
    margin: 10px 0 0 auto;
    flex-wrap: wrap;
}

/* .pdf-limk a {
    text-decoration: underline;
    font-size: 1.4rem;
} */

@media screen and (max-width: 768px) {
    .pdf-limk {
        gap: 10px;
        flex-flow: column;
        margin: 20px auto 0;
        width: 100%;
    }
}

.pdf-limk a {
    line-height: 1;
    text-decoration: underline;
    color: #006bb5;
}