@charset "UTF-8";
@media screen and (max-width: 767px) {

    /* 下層ページ SP用CSS */
    /*----------------------------------------
下層ページ：共通設定
------------------------------------------*/
    #sub #main_content {
        margin-top: min(70 / 375* 100vw, 70px);
        background-position: 100% 0%;
    }

    /*----------------------------------------
パンくずリスト
------------------------------------------*/
    #breadcrumb {
        padding: 0 0 0.6em;
    }
}

/* パンくずリスト：ブレイクポイント */
@media screen and (min-width: 768px) and (max-width: 1032px) {
    #breadcrumb {
        margin-top: 6em;
    }
}

@media screen and (max-width: 767px) {

    /*----------------------------------------
サイドバー
------------------------------------------*/
    #sidebar {
        display: none;
    }

    /*----------------------------------------
アコーディオンメニュー
------------------------------------------*/
    .accordion-title span {
        width: min(15 / 375* 100vw, 15px);
    }

    /*========================================
about > greeting > index.html
===========================================*/
    #sub .greeting {
        flex-direction: column;
    }

    #sub .greeting .photo {
        width: min(300 / 375* 100vw, 300px);
        height: min(300 / 375* 100vw, 300px);
        margin-right: 0;
        margin-bottom: 1.5em;
    }

    #sub .greeting .photo img {
        width: min(350 / 375* 100vw, 350px);
        height: min(350 / 375* 100vw, 350px);
        object-fit: cover;
        object-position: 41%;
    }

    #sub .greeting div:nth-child(2) {
        text-align: center;
    }
}

/*========================================
about > officer > index.html
===========================================*/
@media screen and (max-width: 1032px) {
    .officer .content {
        flex-direction: column;
    }

    .officer .content .table-wrapper b {
        font-size: 1.2rem;
        margin-top: 1em;
    }

    .officer .content .table-wrapper table {
        margin-bottom: 3em;
    }
}

@media screen and (max-width: 767px) {

    /*========================================
member > index.html
===========================================*/
    .member .content_wrap_inner.fcenter {
        flex-direction: column;
        /* display: block; */
        width: 100%;
    }

    .member .content_wrap_inner.fcenter .content-box {
        width: 100%;
        margin-top: 3em;
    }

    .member .content_wrap_inner.fcenter .content-box.mlem02 {
        margin-left: 0 !important;
    }

    .member .content_wrap_inner.fcenter .content-box-text {
        height: fit-content;
    }

    /*========================================
member > meeting-documents > index.html
===========================================*/
    .accordion-detail .fstart {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }

    .accordion-detail .fstart .green-button.mlem01 {
        margin-left: 0 !important;
        margin-top: 1em;
    }

    /*========================================
anniversary > index.html
===========================================*/
    .anniversary {
        display: block;
    }

    .anniversary.order {
        display: flex;
        flex-direction: column;
    }

    .anniversary.order .one {
        order: 1;
    }

    .anniversary.order .two {
        order: 2;
    }

    .anniv-text {
        width: 100%;
        margin: 2em 0
    }

    .anniversary .shiori {
        width: 100%;
        height: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .anniversary .hp {
        width: 100%;
        margin-left: 0;
    }

    /*========================================
movie > index.html
===========================================*/

    .movie {
        display: flex;
        flex-direction: column;
    }

    .movie-content video {
        width: 100%;
        margin-bottom: 0.5em;
    }

    .movie-content.mlem02 {
        margin-left: 0 !important;
        margin-top: 2em;
    }

    .movie-content b {
        margin-bottom: 0.5em;
    }

    .movie-content button {
        width: min(300 / 375* 100vw, 300px) !important;
        margin-bottom: 2em;
    }

    .content_wrap.movie-page {
        margin-bottom: 0 !important;
        padding: 5em min(32 / 375* 100vw, 32px);
        flex-direction: column !important;
    }

    .movie-page img {
        width: 100%;
        margin: 0 auto;
    }

    .movie-page .w40 {
        width: 100% !important;
        margin-top: 2em;
    }

    .movie-page .mlem025 {
        margin-left: 0 !important;
    }

    .movie-page .external-white-outer {
        width: 80% !important;
        margin: 0 auto;
        margin-top: 2em;
    }

    /*========================================
admission > index.html
===========================================*/
    .contact-content {
        flex-direction: column;
    }

    .contact-box {
        padding: 1em;
        text-align: center;
    }

    .contact-box h3.fz30 {
        font-size: 1.5rem !important;
    }

    .contact-box h4 {
        font-size: 1.1rem !important;
    }

    .contact-box p {
        font-size: 0.9rem !important;
        line-height: 1.5;
    }

    .contact-detail:first-child {
        margin-right: 0;
    }

    .contact-detail:last-child {
        padding-left: 0;
        margin-left: 0;
    }

    .contact-detail:last-child::before {
        display: none;
    }

    .contact-detail .mlem01 {
        margin-left: 0.5em !important;
        text-align: left;
    }


    .contact-detail h4.fz36 {
        font-size: 1.5rem !important;
    }

    .contact-detail img {
        width: min(40 / 375* 100vw, 40px);
        margin-right: 0.3em;
    }

    /*========================================
magazine > index.html
===========================================*/
    .flyers {
        flex-direction: column;
    }

    .flyers img {
        width: min(300 / 375* 100vw, 300px);
    }

    .flyers-content {
        margin: 0 0.5em 3em;
    }

    .flyers-content a {
        margin: 0 auto;
    }

    .flyers-content a.blue {
        padding-top: 0.8em;
    }
}