@charset "UTF-8";
/*全般*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ol,ul {
    margin: 16px 0 16px 0;
    padding: 0 0 0 40px;
}

    /*ボディー*/
    @font-face {
        font-family: 'ResourceHanRoundedK-Medium';
        src: url('../font/ResourceHanRoundedK-Medium.woff') format('woff');
        font-display: swap;
    }

    @font-face {
        font-family: 'ResourceHanRoundedSC-Medium';
        src: url('../font/ResourceHanRoundedSC-Medium.woff') format('woff');
        font-display: swap;
    }

    @font-face {
        font-family: 'ResourceHanRoundedJ-Medium';
        src: url('../font/ResourceHanRoundedJ-Medium.woff') format('woff');
        font-display: swap;
    }

    @font-face {
        font-family: 'ResourceHanRoundedTC-Medium';
        src: url('../font/ResourceHanRoundedTC-Medium.woff') format('woff');
        font-display: swap;
    }

    @font-face {
        font-family: 'ResourceHanRoundedHC-Medium';
        src: url('../font/ResourceHanRoundedHC-Medium.woff') format('woff');
        font-display: swap;
    }

    body {
        line-height: 1.7;
        font-size: 14px;
        color: #444444;
        font-family: ResourceHanRoundedJ-Medium;
    }

    /*ヘッダー*/
    header {
        width: 100%;
        padding: 15px 30px 10px 30px;
        display: flex;
        flex-wrap: wrap;
    }

        /*タイトル*/
        header h1 {
            font-size: x-large;
            font-weight: bolder;
            margin: auto auto auto 0;
        }

        header h1 a {
            color: #333333;
            text-decoration: none;
        }

        header h1 a:visited,
        header h1 a:hover,
        header h1 a:active {
            color: #333333;
            text-decoration: none;
        }

        /*ナビゲーション*/
        header nav {
            margin: auto 0 auto auto;
            font-size: large;
        }    

        header nav a:link,
        header nav a:visited {
            font-weight: bolder;
            color: #888888;
            text-decoration: none;
        }

        header nav a:hover,
        header nav a:active {
            color: #333333;
            text-decoration: none;
        }

        header nav ul {
            list-style-type: none;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }

        header nav ul li {
            padding: 0;
            margin: auto 0 auto 20px;
        }

        header nav .current_location a:link,
        header nav .current_location a:visited {
            color: #333333;
        }

    /*メイン*/
    main {
        padding: 0 30px 0 30px;
        display: flex;
        flex-direction: column;
    }

    #top_nav {
        display: flex;
        margin: 30px 0 20px 0;
    }

    #top_nav ol {
        display: flex;
        list-style-type: none;
        margin: 0 auto 0 auto;
        padding: 0;
    }

    #top_nav ol li a {
        margin: 0;
        padding: 0;
    }

    img {
        padding: 0;
        margin: 0;
    }

    #top_table {
        display: flex;
        width: 100%;
    }

        /*テーブル*/
        #month-table-container {
            border: 1px solid #000;
        }

        table{
            text-align: center;
            border-collapse: collapse;
            min-width: 1000px;
        }

        th {
            border-bottom: 1px solid #ccc;
        }

        td {
            padding: 5px;
        }

        .start {
            width: 8%;
        }

        .end {
            width: 8%;
        }

        .closed {
            width: 8%;
        }   
        
        .opening{
            width: 10%;
        }
        
        .ex_name{
            width: 17%;
        }
        
        .artists{
            width: 14%;
        }

        .curator{
            width: 7%;
        }
        
        .ex_loc{
            width: 10%;
        }
        
        .near{
            width: 8%;
        }
        
        .fee{
            width: 6%;
        }
        
        .url{
            width: 4%;
        }

        /*アーカイブトップページ*/
        #archives_container {
            width: 100%;
            display: flex;
        }

        #archives_content {
            max-width: 800px;
            margin: 0 auto 0 auto;
            display: flex;
            flex-wrap: wrap;
        }
        
        /*アーカイブメニュー*/
        .archives_month_block {
            width: 130px;
        }

        .archives_month_block ul {
            list-style-type: none;
        }

        /*アーカイブ月別ページ*/
        #archives_month_container {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        #archives_menu {
            width: 130px;
            display: flex;
            flex-wrap: wrap;
        }

        #archives_main {            
            width: 100%;
        }

        #month-table-container {
            overflow-x: scroll;
        }

        /*プライバシーポリシー*/
        #pp-container {
            width: 100%;
            display: flex;
        }

        #pp-content {
            width: 800px;
            margin: 0 auto 0 auto;
        }

        #pp-content h3 {
            margin: 20px 0 0 0;
        }

        #pp-content p {
            margin: 10px 0 0 0;
        }

        /*当サイトについて*/
        #about-container {
            width: 100%;
            display: flex;
        }

        #about-content {
            width: 800px;
            margin: 0 auto 0 auto;
        }

    /*フッター*/
    footer {
        width: 100%;
        margin: 20px 0 0 0;
        padding: 10px 30px 10px 30px;
        background-color: #eeeeee;
        display: flex;
        flex-direction: column;
    }

    #footer_contents ul li a,
    #footer_contents ul li a:link,
    #footer_contents ul li a:visited {
        color: #444444;
        text-decoration: none;
    }

    #footer_contents ul li a:hover,
    #footer_contents ul li a:active {
        color: #000000;
        text-decoration: underline;
    }

    footer #footer_contents {
        margin: auto;
    }

    footer #footer_contents ul {
        list-style-type: none;
        padding: 0;
        margin: 0 auto 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    footer #footer_contents ul li {
        margin: 0 10px 0 10px;
    }

    footer #copy_right {
        margin: 15px auto auto auto;
    }

/*ハンバーガーメニュー*/
@media screen and (min-width: 521px) {
    .sp-menu {
        display: none;
    }
}

@media screen and (max-width:520px) {
            #global_nav {
                display: none;
            }

            /* ハンバーガーメニューのボタン */
            .sp-menu__box {
                position: fixed;  /* 位置を固定 */
                top: 0;  /* 最上部 */
                right: 0;  /* 右端 */
                /* 中の要素を上下中央寄せ */
                display: flex;
                justify-content: center;
                align-items: center;
                /* サイズ指定 */
                height: 60px;
                width: 60px;
                /* 最前面にする */
                z-index: 100;
                background-color: transparent;
            }

            /* メニューの白線を疑似要素を使って3本作成 */
            .sp-menu__box span,         /* 真ん中の線 */
            .sp-menu__box span:before,  /* 上の線 */
            .sp-menu__box span:after {  /* 下の線 */
                /* contentの値を指定しないと疑似要素が生成されない */
                content: "";
                /* ３本線のサイズと色を指定 */
                display: block;
                height: 3px;
                width: 25px;
                border-radius: 3px;
                background-color: #333;
                /* 3本線の位置は絶対位置で指定 */
                position: absolute;
            }

            /* 上の線の位置 */
            .sp-menu__box span:before {
                /* 真ん中の線と離す距離 */
                bottom: 8px;
                }
                /* 下の線の位置 */
                .sp-menu__box span:after {
                /* 真ん中の線と離す距離 */
                top: 8px;
            }

            /* チェックボックスは常に非表示 */
            #sp-menu__check {
                display: none;
            }
            /* チェックボックスのチェックがON（スマホ用メニューを開いた状態） */
            /* 真ん中の線 */
            #sp-menu__check:checked ~ .sp-menu__box span {
                /* 透明にして見えなくする */
                background: transparent;
            }
            /* 上の線 */
            #sp-menu__check:checked ~ .sp-menu__box span::before {
                /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
                bottom: 0;
                /* 右に45度傾けてバツの片側の線にする */
                transform: rotate(45deg);
            }
            /* 下の線 */
            #sp-menu__check:checked ~ .sp-menu__box span::after {
                /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
                top: 0;
                /* 左に45度傾けてバツの片側の線にする */
                transform: rotate(-45deg);
            }
            #sp-menu__check:checked ~ .hamburger__content {
                left: 0;
            }

            /* スマホ用メニュー */
            .sp-menu-content {
                /* 絶対位置で指定   */
                position: absolute;
                /* 画面全体に表示 */
                width: 50px;
                /* 開始位置は左上隅 */
                top: 0;
                right: -150px;
                /* 前面に表示するがハンバーガーボタンよりは背後 */
                z-index: 90;
            }
            /* スマホ用メニューのリスト */
            .sp-menu-list {
                padding: 50px 0 0 0;
                margin: 0;
            }
            /* スマホ用メニュー項目 */
            .sp-menu-item {
                list-style: none;
                text-align: right;
            }

            /* スマホ用メニュー項目のリンク */
            .sp-menu-link {
                display: block;
                width: 100%;
                font-size: 15px;
                font-weight: bolder;
                color: #333;
                text-decoration: none;
                padding: 9px 15px 10px 0;
            }

            /* ハンバーガーボタンを押してチェックがONの時だけ
            スマホ用メニューを画面左端に移動する */
            #sp-menu__check:checked ~ .sp-menu-content {
                right: 0px;
            }
            /* 変更箇所はコメントの項目のみ */
            .sp-menu-content {
                width: 150px;
                position: fixed;
                right: -150px;
                top: 0;

                /* 普段は画面外にするために左端を画面右端の位置にする */

                z-index: 90;
                background-color: rgba(255, 255, 255, 0.5);

                /* 右端からゆっくり移動するように表示*/
                transition: all 0.3s;
            }
        }


/*アーカイブ月別ページの表示*/
@media screen and (max-width:1190px) {        
    /*アーカイブ月別ページ*/
    #archives_month_container {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }

    #archives_menu {
        width: auto;
        margin: 0 auto 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

    #archives_main {            
        width: 100%;
    }

    #month-table-container {
        overflow-x: scroll;
    }
}