/*------------------------------------------------------
    common
------------------------------------------------------*/
header { z-index: 100;}


/*------------------------------------------------------
    search area
------------------------------------------------------*/
.search_area { background: #f3f4f4; padding-bottom: 30px; margin-bottom: 40px;}
.search_area .title { font-size: 18px; border-bottom: 2px solid #767676; position: relative; margin-bottom: 18px;}
.search_area .title::before { content: ''; width: 100px; height: 2px; background-color: #d4c77e; display: block; position: absolute; left: 0; bottom: -2px;}
.search_area .pan .wrapper { margin-top: 0; padding-top: 5px;}

#conditions { display: inline-block;/*max-width: 670px; margin-left: auto; margin-right: auto;*/ margin-bottom: 35px; width: 330px;}
#conditions ul { display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
#conditions ul li button { line-height: 38px; color: #333; font-size: 14px; text-align: center; border-radius: 5px; display: block; background: #d9d9d9; outline: none; border: none; padding: 0 14px; }
#conditions ul li:not(:last-child) { margin-right: 18px;}

#categoryform {  display: inline-block;/*max-width: 670px;*/ margin-left: 20px; width: calc(100% - 330px); }
#archive_exhibition #category_submit { margin-bottom: 0;}

@media only screen and (min-width: 769px) {
    #conditions ul li button:hover { opacity: 0.8;}
}

@media only screen and (max-width: 640px) {
    #conditions ul li { width: 100%; margin-bottom: 5px;}
    #conditions ul li button { width: 100%;}
    #conditions ul li:not(:last-child) { margin-right: 0;}
}

/*----------------------------------------------------*/
/*--------------------add sunlight--------------------*/
/*----------------------------------------------------*/
#archive_exhibition .flex_box {
    display: flex;
    justify-content: center;
    position: relative;
    padding-bottom: 1.5em;
}
#archive_exhibition #en_page #conditions{
    width: 185px;
}
#archive_exhibition #en_page #categoryform{
    width: calc(100% - 185px);
}
#archive_exhibition .category_area{
    text-align: left;
    margin-top: -6px;
}
.category_submit{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#conditions ul li:not(:last-child){
    margin-right: 9px;
}
#conditions ul li button{
    padding: 0 12px;
    line-height: 41px;
}
#archive_exhibition label{
    margin: 0 20px 0 0;
}
@media only screen and (max-width: 1080px){
    #archive_exhibition .flex_box{
        display: block;
        margin: 0 auto;
        width: 90%;
    }
    #conditions, #archive_exhibition #en_page #conditions{
        width: 100%;
    }
    #categoryform, #archive_exhibition #en_page #categoryform{
        width: 100%;
        margin-left: 0;
    }
    .searc_box{
        padding-bottom: 0;
    }
    .category_submit{
        position: relative;
    }
}
@media only screen and (max-width: 640px){
    #conditions ul li:not(:last-child) {
        margin-right: 0;
    }
    #archive_exhibition .category_area{
        text-align: left;
    }
}


/*------------------------------------------------------
    jqueyr ui dialog
------------------------------------------------------*/
.ui-widget-overlay { background: #000;}
.ui-draggable .ui-dialog-titlebar { text-align: center; border-radius: 0; border-color: transparent; font-size: 18px; font-weight: normal; }
.ui-widget.ui-widget-content { padding: 0; border: none;}
.ui-dialog .ui-dialog-titlebar-close { width: 50px; height: 50px; margin: 0; border-radius: 50%; top: -25px; right: -25px; background: url(../img/dialog_close.png) no-repeat left top #000; border: none; background-size: 50px; }
.ui-dialog .ui-dialog-content{text-align: center;}

@media only screen and (min-width: 769px) {
    .ui-dialog .ui-dialog-content { padding: 10px 20px 20px 30px; }
    #dialog1 { padding: 20px;}
    div[aria-describedby='dialog1'] { max-width: 1100px !important;}
    div[aria-describedby='dialog2'],
    div[aria-describedby='dialog3'] { max-width: 1160px !important;}
    /*.ui-widget.ui-widget-content { top: 100px !important;}*/
}

@media only screen and (max-width: 1160px) {
    .ui-dialog .ui-dialog-content img { width: 100%; height: auto;}
}

@media only screen and (max-width: 768px) {
    .ui-draggable .ui-dialog-titlebar { font-size: 16px;}
    .ui-dialog .ui-dialog-titlebar-close { width: 40px; height: 40px; top: -15px; right: -10px; background-size: 40px auto; }
}

#dialog1 .cate_box{ width: calc(50% - 15px); margin-right: 30px; margin-bottom: 20px; float: left; text-align: left; }
#dialog1 .cate_box:nth-child(2n){ margin-right: 0; }
#dialog1 .cate_box .title{ font-size: 15px; color: #fff; padding: 2px 10px; margin-bottom: 10px; }
#dialog1 .exhi_cate_1 .title{ background: #ee781e; }
#dialog1 .exhi_cate_2 .title{ background: #00895A; }
#dialog1 .exhi_cate_3 .title{ background: #004EA1; }
#dialog1 .exhi_cate_4 .title{ background: #E8456C; }
#dialog1 .exhi_title{ position: relative; padding-left: 25px; margin-bottom: 5px; display: block; font-size: 13px; }
#dialog1 .exhi_title span{ width: 20px; font-size: 11px; display: block; position: absolute; top: 0.2em; left: 0; color: #fff; text-align: center; line-height: 20px; }
#dialog1 .exhi_title span.date,
#dialog1 .exhi_title span.data{ background: #ee781e; }
#dialog1 .exhi_title span.communication{ background: #004EA1; }
#dialog1 .exhi_title span.media{ background: #00895A; }
#dialog1 .exhi_title span.human{ background: #E8456C; }

@media only screen and (max-width: 640px) {
    #dialog1 .cate_box { width: 100%; margin-right: 0; float: none; }
}