@charset "utf-8";


/* * {
    outline: 1px solid magenta;
} */


/* -----------基本レイアウトここから------------- */


html {
    scroll-behavior: smooth;
}



#Archive_top {
    body {
        font-family: 'Noto Serif JP';
        font-size: 16px;
        line-height: 1.5;
        color: #2c2c2c;
    }

    :root {
        --maincolor: #F2F0DB;
        --accentcolor: #00496D;
    }
}

/* -----------基本レイアウトここまで------------- */



/* -----------メインここから-------------  */

.Collaboration p {
    text-align: justify;
    width: 90%;
    margin-bottom: 30px;
}

.archive_event_h3 p {
    text-align: justify;

}

.archive_event_h3 p {
    text-align: justify;
    width: 90%;
    max-width: 800px;
    /* margin: 0 auto; */
    word-break: break-word;
}

/* .archive_body {
    width: 1200px;
    margin: 0 auto 50px;
    display: flex;
    justify-content: space-between;
} */

/* .archive_body {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 50px;
    display: flex;
    justify-content: space-between;
} */

.archive_body {
    width: 90%;
    /* max-width: 1200px; */
    margin: 0 auto 50px;
    display: flex;
    justify-content: flex-start;
    /* 左寄せ */
}



main {
    padding-top: 85px;
    flex-basis: 1200px;
    /* padding-right: 20px; */
    background-color: #ffffff;
    padding-left: 70px;
    margin-top: 30px;
}



/* aside {
    flex-basis: 284px;
    border-right: 1px solid #000000;
    margin-top: 30px;
    padding-left: 10px;

}



aside nav {
    font-size: 40px;
    padding: 24px 28px;
    margin-bottom: 24px;
} */


aside {
    flex-basis: 284px;
    /* 横幅はそのままで調整 */
    border-right: 1px solid #000000;
    /* 縦線 */
    margin-top: 30px;
}


aside nav {
    font-size: 40px;
    padding: 24px 28px;
    margin-bottom: 24px;
    /* 必要に応じて調整 */
    text-align: center;
}

h2 {
    /* width: 1680px;
    font-size: 40px;
    text-align: center;
    /* margin: 0 auto 1.5%; */

    /* ← 下に30pxの余白を追加 */
    margin: 0 1.8%;
    padding-bottom: 80PX;
    border-bottom: solid 1px #000000;
}

/* .Collaboration time {
    margin-bottom: 3em;
} */
.Collaboration h3 {
    font-size: 24px;
    text-align: left;
    letter-spacing: .1em;
    margin-bottom: 50px;

}

.archive_event_h3 h3 {
    font-size: 24px;
    text-align: left;
    letter-spacing: .1em;
    margin-bottom: 50px;
    margin-top: 50px;

}

.article_tittle {
    justify-content: flex-start;
    font-size: 24px;
    text-align: left;
    letter-spacing: .1em;
    margin-bottom: 50px;
    margin-top: 10px;

}

.Collaboration time {
    font-size: 22px;


}

/* .Collaboration time {

    font-size: 28px;
    line-height: 3em;
} */

.hush_Collaboration {
    display: inline-block;
}

.hush_Event {
    display: inline-block;
}

/* .event_archive_img_container {
display: flex; */
/* gap: ０; */
/* 
} */

.article_img01 {
    display: flex;
    /* aspect-ratio: 3 / 4; */
    height: 500px;
    object-fit: cover;
    margin-top: 15px;
    padding-bottom: 20px;
}

/* .article_photo_area01 {
    margin-left: 30px;
}
 */


.article_img02 {
    /* aspect-ratio: 3 / 4; */
    height: 200px;
    object-fit: cover;

}

.article_img03 {
    /* aspect-ratio: 3 / 4; */
    height: 200px;
    object-fit: cover;
    margin-left: 30px;

}



.Collaboration_text {
    max-width: 800px;
    position: relative;
    bottom: 25px;
    padding-top: 30px;
    margin-bottom: 10px;
    text-align: right;
}

.quote_label {
    display: inline-block;
    position: relative;
    top: -30px;
    /* ← 上に移動したい分 */
}


.Collaboration_text ::after {
    position: absolute;

}


/* #Event {
    margin-top: 100px;

} */

.archive_event_h3 time {
    font-size: 22px;
    margin-top: 50px;
    /* line-height: 5em; */

}

.archive_event_h3 {
    border-top: solid 1px #000000;
    margin-top: 20px
}


.archive_event_img {
    display: flex;
    /* aspect-ratio: 3 / 4; */
    height: 600px;
    object-fit: cover;
    /* margin-left: 30px; */
    margin-bottom: 30px;
    margin-top: 15px;
}

/* .okapi_event_img_container {
    display: flex;
       
} */


.okapi_event_img01 {
    height: 300px;
    object-fit: cover;
    /* margin-left: 30px; */
    margin-bottom: 50px;
    margin-top: 30px;
}


.okapi_event_img02 {
    height: 300px;
    object-fit: cover;
    margin-left: 30px;
    margin-bottom: 50px;
    margin-top: 30px;
}




.article_text01,
.article_text02 {
    /* width: 95%; */
    /* 親の幅の90%、画面幅に応じて可変 */
    max-width: 800px;
    /* 読みやすさの限界幅 */
    /* margin: 0 auto 30px; */
    /* 上0 / 左右中央寄せ / 下30px */
    text-align: justify;
    /* 両端揃えで整える */
    word-break: break-word;
    /* 長い語句やURLの折り返し許可 */
    padding-bottom: 30px;

}


.sakura_article {
    display: none;
}



/* -----------メインここまで------------- */


/* -----------レスポンシブここから------------- */
/* ---responsible design for iPad pro--- */
@media screen and (max-width: 1024px) {

    /* 全体の最大幅を1024pxに制限 */
    body,
    html {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* アーカイブ本体 */
    .archive_body {
        width: 100%;
        max-width: 1024px;
        padding: 0 20px;
        box-sizing: border-box;
    }



    h2 {
        width: 100%;
        font-size: 32px;
        /* margin: 0 auto 40px auto; */
        box-sizing: border-box;
    }

    /* メインとサイドバーの横並びレイアウト維持 */
    aside {
        flex-basis: 20%;
        /* 例えば25%に縮小 */
    }

    main {
        flex-basis: 75%;
        /* mainの幅を広げてバランス調整 */
    }



    /* サイドバー文字サイズや余白調整（狭い画面向け） */
    aside nav {
        font-size: 32px;
        padding: 16px;
    }


    aside ol {

        padding-right: 45px;

    }

    /* 画像サイズは固定のまま維持（要求どおり）→変更なし */



    .Collaboration_text {
        max-width: 800px;
        position: relative;
        bottom: 25px;
        padding-top: 30px;
        margin-bottom: 10px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        /* テキストと画像を右に揃える */
        align-items: center;
        /* テキストと画像の縦位置を揃える */
        gap: 5px;
        /* テキストと画像の間隔 */
    }

    .quote_label {
        display: inline-block;
        position: relative;
        top: 4px;
        /* ← 上に移動したい分 */
    }


    .logo_img {
        height: 70px;
        /* 単位の間違いを修正：50x → 40pxなど */
        width: auto;
        flex-shrink: 0;
        margin-top: -1.5em;
        /* 上に1〜2em分移動したい場合はマイナスマージンで調整 */
    }

    .Collaboration p {
        text-align: justify;
        width: 90%;
        /* 親幅の90%に制限 */
        max-width: 800px;
        /* 最大幅を設定 */
        /* margin: 0 auto 30px auto;　中央揃え */
        /* 中央寄せ＋下余白 */
        word-break: break-word;
        /* 長い単語やURLの折り返しを許可 */

    }


    .archive_event_h3 p {
        text-align: justify;
        width: 90%;
        max-width: 800px;
        /* margin: 0 auto;　中央揃え */
        word-break: break-word;
    }

    .article_text01,
    .article_text02 {
        padding-right: 20px;
        /* 適宜調整 */
    }

    .sakura_article {
        display: block;
    }


    .article_img01 {
        width: 90%;
        height: auto;
        display: block;


    }

    .archive_event_img {
        width: 65%;
        height: auto;
        display: block;
    }



    .aside nav ol {
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }

    aside nav ol li {
        display: block;
        text-align: center;
    }

    aside nav ol li a {
        display: inline-block;
        text-align: center;
    }


}








/* ---responsible design for iPad pro--- */
/* -----------レスポンシブここまで------------ */