@charset "UTF-8";

/* ------------------------------------------------------ */
/* ------------------------------ */
/* SP用CSS                      */
/* ------------------------------ */
/*@media only screen and (max-width: 768px) {*/
@media only screen and (max-width: 979px) {

    body{
        color: #000;
        line-height: 1em;
    }

    #contentWrapper #content{
        width: 100%;
    }
    #contentWrapper #content .wrap{
        width: 100%;
        margin: 0 auto;
    }

    #contentWrapper #breadcrumb.under{
        margin-top: 0px;
    }

    #contentWrapper #mainWrap {
        line-height: 0;
    }
    #contentWrapper #mainWrap.under{
        margin-top: 44px;
    }
    #contentWrapper #mainWrap .images{
        width: 100%;
        margin: 0 auto;
    }
    #contentWrapper #mainWrap .images img{
        width: 100%;
    }
    #contentWrapper #content{
        width: 100%;
    }

    #contentWrapper #content .fair{
        width: 100%;
        background: url("../../img/fair/fair_bg.jpg") repeat 0 0;
        background-size: 136px 136px;
        padding: 15px 0 20px 0;
        font-size: 13px;
    }
    #contentWrapper #content .inner{
        width: 92%;
        padding: 0 4% 0 4%;
        margin: 0 0 20px 0;
    }

    #contentWrapper #content .inner h2{
        font-size: 16px;
        color: #ec0703;
        line-height: 1.7em;
        margin: 18px 0 15px 0;
        text-align: center;
    }

    #contentWrapper #content .inner .message{
        font-size: 13px;
        color: #000;
        line-height: 1.7em;
        margin-bottom: 20px;
    }
    #contentWrapper #content .fair .inner .img{
        display: block;
        width: 171px;
        margin: 0 auto;
        height: auto;
        margin-bottom: 15px;
    }
    #contentWrapper #content .fair .inner .img img{
        width: 171px;
        height: auto;
    }

    #contentWrapper #content .fair .inner .infoWrap{
    }
    #contentWrapper #content .fair .inner .infoWrap ul li{
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .title{
        width: 62px;
        height: 49px;
        margin: 0 auto;
        margin-bottom: 15px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 1.5em;
        background: url("../../img/fair/circle_bg.png") no-repeat 0 0;
        background-size: 62px 62px;
        padding-top: 13px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info{
        line-height: 1.7em;
        padding-bottom: 10px;
    }

    #contentWrapper #content .fair .inner .infoWrap ul li .info p{
        margin-bottom: 10px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li:nth-child(1) .info p{
        margin-bottom: 20px;
    }

    #contentWrapper #content .fair .inner .infoWrap ul li .info p.no_margin{
        margin-bottom: 0px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info a{
        color: #0588d7;
    }

    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf,
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form{
        float: left;
        /*564 118*/
        /*width: 282px;*/
        width: 100%;
        height: 59px;
        background-color: #ffffff;
        border: 1px solid #dfdfdf;
        text-align: center;
        line-height: 1.5em;
        margin-right: 8px;

        -moz-border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
        -o-border-radius: 0.5em;
        -ms-border-radius: 0.5em;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf:nth-child(2){
        margin-right: 0;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf a,
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form a{
        display: block;
        padding: 10px 0 10px 0;
        background: url("../../img/fair/icon_pdf.png") no-repeat 20% 22px;
        background-size: 15px 15px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf.icon_form a{
        display: block;
        padding: 10px 0 10px 26px;
        background: url("../../img/fair/icon_mail.png") no-repeat 20% 22px;
        background-size: 17px 17px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf a:hover,
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form  a:hover{
        text-decoration: none;
        opacity: 0.7;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf:nth-child(2) a{
        /*padding: 20px 0 20px 0;*/
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form{
        width: 100%;
        height: 59px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form a{
        padding: 12px 0 20px 0;
        background: url("../../img/fair/icon_mail.png") no-repeat 8% 18px;
        background-size: 20px 21px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .pdf{
        background: url("../../img/fair/icon_pdf.png") no-repeat 0px 4px;
        background-size: 15px 15px;
        padding-left: 20px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .pdfWrap{
        margin: 0;
        padding-top: 6px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info p.option{
        font-size: 13px;
        margin-bottom: 6px;
    }

    #contentWrapper #content .fair .inner .recommend{
        width: 96%;
        padding: 2% 2% 15px 2%;
        background-color: #fff;
    }
    #contentWrapper #content .fair .inner .recommend p{
        padding: 0 2% 0 2%;
        font-size: 13px;
        line-height: 1.7em;
    }
    #contentWrapper #content .fair .inner .recommend .title{
        text-align: center;
        font-size: 13px;
        color: #ec0703;
        background-color: #f5f5f5;
        line-height: 1.5em;
        padding: 10px 2% 8px 2%;
        margin-bottom: 15px;
    }
    #contentWrapper #content .fair .inner .recommend .img{
        width: 54px;
        height: 54px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    #contentWrapper #content .fair .inner .recommend .img img{
        width: 54px;
        height: 54px;
    }
    #contentWrapper #content .fair .inner .recommend .info{
    }
    #contentWrapper #content .fair .inner .recommend .info a{
        color: #0588d7;
    }


    #contentWrapper #content .archive  > ul > li{
        background-color: #f5f5f5;
        border-top: 5px solid #fff;
        font-size: 13px;
        line-height: 1.7em;
        padding: 0 0 0px 0;
    }

    #contentWrapper #content .archive  > ul > li h3{
        color: #ec0703;
        font-size: 14px;
        line-height: 1em;
        margin: 20px 0 10px 0;
    }

    #contentWrapper #content .archive  > ul  > li > .inner > ul.imgList{
        margin-bottom: 10px;
    }
    #contentWrapper #content .archive  > ul > li > .inner >  ul.imgList >  li{
        float: left;
        width: 23%;
        margin: 0 2% 2% 0;
    }
    #contentWrapper #content .archive  > ul > li > .inner >  ul.imgList >  li > .imgWrap{

        border: 1px solid #e70c0c;
        width: 100%;
        /*height: 51px;*/

        position: relative;;
        overflow: hidden;
    }
    #contentWrapper #content .archive  > ul > li > .inner >  ul.imgList >  li > .imgWrap:before {
        content:"";
        display: block;
        padding-top: 75%;
    }
    #contentWrapper #content .archive > ul > li > .inner >  ul.imgList > li:nth-child(4)  > .imgWrap,
    #contentWrapper #content .archive > ul > li > .inner >  ul.imgList > li:nth-child(8)  > .imgWrap{
        margin: 0 0 2% 0;
    }
    #contentWrapper #content .archive  > ul > li  > .inner > ul.imgList > li> .imgWrap > img{
        /*width: 71px;*/
        height: 100%;

        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    #contentWrapper #content .archive  > ul > li p{
        margin-bottom: 18px;
    }
    #contentWrapper #content .archive  > ul > li p.pdf{
        background: url("../../img/fair/icon_pdf.png") no-repeat 0px 4px;
        background-size: 15px 15px;
        padding-left: 20px;
        margin-bottom: 4px;
    }
    #contentWrapper #content .archive  > ul > li  p.pdf a{
        color: #0588d7;
    }


}


/* ------------------------------ */
/*Tablet用CSS                         */
/* ------------------------------ */
@media screen and (min-width: 580px) and (max-width: 979px) {
    #contentWrapper #content .fair .inner .btnWrap{
        text-align: center;
    }
    #contentWrapper #content .fair .inner .pdfWrap{
        display: inline-block;
        margin: 0 auto;
        text-align: center;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf,
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form{
        float: left;
        /*564 118*/
        width: 282px;
        height: 59px;
        background-color: #ffffff;
        border: 1px solid #dfdfdf;
        text-align: center;
        line-height: 1.5em;
        margin-right: 8px;

        -moz-border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
        -o-border-radius: 0.5em;
        -ms-border-radius: 0.5em;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf:nth-child(2){
        margin-right: 0;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf a,
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form a{
        display: block;
        padding: 10px 0 10px 0;
        background: url("../../img/fair/icon_pdf.png") no-repeat 20px 22px;
        background-size: 15px 15px;
    }

    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form{
        float: none;
        width: 518px;
        margin: 0 auto;
        margin-bottom: 15px;
        height: 59px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form a{
        padding: 12px 0 20px 0;
        background: url("../../img/fair/icon_mail.png") no-repeat 65px 18px;
        background-size: 20px 21px;
    }

}



/* ------------------------------ */
/*PC用CSS                         */
/* ------------------------------ */
/*@media screen and (min-width: 769px), print {*/
@media screen and (min-width: 980px), print {
    body{
        color: #000;
        line-height: 1em;
    }

    #contentWrapper #breadcrumb.under{
        margin-top: 0px;
    }

    #contentWrapper #mainWrap {
        position: relative;
        width: 100%;
        /*min-width: 1200px;*/
        height: 353px;
        overflow: hidden;
    }
    #contentWrapper #mainWrap.under{
        margin-top: 75px;
    }
    #contentWrapper #mainWrap .images{
        position: relative;
        width: 100%;
        min-width: 1399px;
        height: 353px;
        overflow: hidden;
    }
    #contentWrapper #mainWrap .images img{
        width: 100%;
    }
    #contentWrapper #content{
        width: 100%;
    }
    #contentWrapper #content .fair{
        width: 100%;
        background: url("../../img/fair/fair_bg.jpg") repeat 0 0;
        background-size: 136px 136px;
        padding: 34px 0 40px 0;
        font-size: 15px;
    }
    #contentWrapper #content .inner{
        width: 884px;
        margin: 0 auto;
        padding: 0 48px 0 48px;
        background: none;
    }

    #contentWrapper #content .inner h2{
        font-size: 22px;
        color: #ec0703;
        line-height: 1.7em;
        margin: 34px 0 22px 0;
        text-align: center;
    }

    #contentWrapper #content .inner .message{
        font-size: 16px;
        color: #000;
        line-height: 1.7em;
        margin-bottom: 20px;
    }
    #contentWrapper #content .fair .inner .img{
        float: left;
        display: block;
        width: 240px;
        height: auto;
    }
    #contentWrapper #content .fair .inner .img img{
        width: 240px;
        height: auto;
    }

    #contentWrapper #content .fair .inner .infoWrap{
        padding-left: 270px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li{
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .title{
        float: left;
        width: 85px;
        height: 66px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        line-height: 1.5em;
        background: url("../../img/fair/circle_bg.png") no-repeat 0 0;
        background-size: 85px 85px;
        padding-top: 19px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info{
        padding-left: 98px;
        line-height: 1.7em;
        padding-bottom: 10px;
    }

    #contentWrapper #content .fair .inner .infoWrap ul li .info p{
        margin-bottom: 10px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li:nth-child(1) .info p{
        margin-bottom: 20px;
    }

    #contentWrapper #content .fair .inner .infoWrap ul li .info p.no_margin{
        margin-bottom: 0px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info a{
        color: #0588d7;
    }

    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf,
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form{
        float: left;
        width: 252px;
        height: 63px;
        background-color: #ffffff;
        border: 1px solid #dfdfdf;
        text-align: center;
        line-height: 1.5em;
        margin-right: 8px;

        -moz-border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
        -o-border-radius: 0.5em;
        -ms-border-radius: 0.5em;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf:nth-child(2){
        margin-right: 0;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf a,
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form a{
        display: block;
        padding: 10px 0 10px 0;
        background: url("../../img/fair/icon_pdf.png") no-repeat 24px 22px;
        background-size: 15px 15px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf.icon_form a{
        display: block;
        padding: 10px 0 10px 26px;
        background: url("../../img/fair/icon_mail.png") no-repeat 14px 22px;
        background-size: 17px 17px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf a:hover,
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form  a:hover{
        text-decoration: none;
        opacity: 0.7;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_pdf:nth-child(2) a{
        /*padding: 20px 0 20px 0;*/
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form{
        float: none;
        width: 518px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .btn_form a{
        padding: 20px 0 20px 0;
        background: url("../../img/fair/icon_mail.png") no-repeat 65px 18px;
        background-size: 20px 21px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .pdf{
        background: url("../../img/fair/icon_pdf.png") no-repeat 0px 4px;
        background-size: 15px 15px;
        padding-left: 20px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info .pdfWrap{
        margin: 0;
        padding-top: 6px;
    }
    #contentWrapper #content .fair .inner .infoWrap ul li .info p.option{
        font-size: 14px;
        margin-bottom: 6px;
    }

    #contentWrapper #content .fair .inner .recommend{
        width: 886px;
        padding: 14px 14px 28px 14px;
        background-color: #fff;
    }
    #contentWrapper #content .fair .inner .recommend p{
        font-size: 14px;
        line-height: 1.7em;
    }
    #contentWrapper #content .fair .inner .recommend .title{
        text-align: center;
        font-size: 16px;
        color: #ec0703;
        background-color: #f5f5f5;
        line-height: 1em;
        padding: 10px 0 8px 0;
        margin-bottom: 15px;
    }
    #contentWrapper #content .fair .inner .recommend .img{
        float: left;
        width: 88px;
        height: 88px;
    }
    #contentWrapper #content .fair .inner .recommend .img img{
        width: 88px;
        height: 88px;
    }
    #contentWrapper #content .fair .inner .recommend .info{
        padding-left: 108px;
    }
    #contentWrapper #content .fair .inner .recommend .info a{
        color: #0588d7;
    }


    #contentWrapper #content .archive  > ul > li{
        background-color: #f5f5f5;
        border-top: 6px solid #fff;
        font-size: 14px;
        line-height: 1.7em;
        padding: 0 0 40px 0;
    }

    #contentWrapper #content .archive  > ul > li h3{
        color: #ec0703;
        font-size: 18px;
        line-height: 1em;
        margin: 35px 0 15px 0;
    }

    #contentWrapper #content .archive  > ul  > li > .inner > ul.imgList{
        margin-bottom: 10px;
    }
    #contentWrapper #content .archive  > ul > li > .inner >  ul.imgList > li {
    }
    #contentWrapper #content .archive  > ul > li > .inner >  ul.imgList > li > .imgWrap{
        float: left;
        border: 2px solid #e70c0c;
        width: 208px;
        height: 156px;
        margin: 0 12px 12px 0;
        position: relative;;
        overflow: hidden;
    }
    #contentWrapper #content .archive > ul > li > .inner >  ul.imgList > li:nth-child(4)  > .imgWrap,
    #contentWrapper #content .archive > ul > li > .inner >  ul.imgList > li:nth-child(8)  > .imgWrap{
        margin: 0 0px 12px 0;
    }
    #contentWrapper #content .archive  > ul > li  > .inner > ul.imgList > li > .imgWrap > img{
        /*width: 208px;*/
        height: 156px;

        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    #contentWrapper #content .archive  > ul > li p{
        margin-bottom: 18px;
    }
    #contentWrapper #content .archive  > ul > li p.pdf{
        background: url("../../img/fair/icon_pdf.png") no-repeat 0px 4px;
        background-size: 15px 15px;
        padding-left: 20px;
        margin-bottom: 4px;
    }
    #contentWrapper #content .archive  > ul > li  p.pdf a{
        color: #0588d7;
    }

}