@charset "UTF-8";



/*==================================
    span.label
==================================*/
span.label{
    padding-left:5px;
}
span.label:before{
    content: '';
    border:5px solid transparent;
    border-left: 5px solid #fff;
    width:5px;
    height: 5px;
    box-sizing: border-box;
    display: inline-block;
    margin-right: 10px;
}




/*==================================
    hasColumn
==================================*/
div.hasColumn{
    overflow:hidden
}
div.hasColumn div.leftBlock{
    width:50%;
    float:left;
}
div.hasColumn div.rightBlock{
    width:50%;
    float:right;
}

/*==================================
    button
==================================*/
.btn{
    font-size:100%;
    background:#000;
    display:inline-block;
    margin:0 auto;
    color:#fff;
    font-weight:bold;
    text-decoration: none;
    padding:10px 60px;
    text-align:center;
    cursor:pointer;
    border:none;
    -webkit-transition: all .3s;
    transition: all .3s;
}
a.btn{
    color:#fff;
}
.btn:hover{
    background-color: #ff5611;
}


div.formNav{
    text-align: center;
}

/*==================================
    accordionTitle
==================================*/
div.accordion{
}
div.accordionTitle{
    padding: 5px;
    position: relative;
    color: pointer;
}
div.accordionDetail{
    background: #fff;
    display: none;
}


/*==================================
    caution
==================================*/
div.caution{
    border: 2px solid #ff0199;
    color:#ff0199;
    padding:5px 10px;
    margin: 10px 0;
}

/*==================================
    pageNav
==================================*/
ul.pageNav{
    text-align: center;
}
ul.pageNav li{
    display: inline-block;
    margin:0 5px;
}
ul.pageNav li a{
    display: inline-block;
    padding: 12px 18px 12px 18px;
    color:#000;
    background: url(/img/common/icon/page_arrow.png) no-repeat;
    background-size: 10px auto;
    background-position: 0 50%;
}
ul.pageNav li a:hover{
    color:#fc6721
}


ul.sort {
    text-align: center;
}
ul.sort li{
    display: inline-block;
}
ul.sort li span{
    display: inline-block;
    background: none;
    vertical-align: middle;
    padding: 12px 30px 12px 17px;
    color:#999;
    cursor: pointer;
}
ul.sort li span:hover{
    color:#fc6721
}
ul.sort li span:before{
    content:'';
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    padding: 8px;
    margin:0 8px 0 0 ;
    color:#000;
    background: #999 ;
}
ul.sort li.is_checked span:before{
    background: #ff5611 url(/img/common/icon/check.png) no-repeat;
    background-size: 10px auto;
    background-position: 50% 50%;
}
ul.sort li.is_checked span{
    color:#000;
}
ul.sort li.is_checked span:hover{
    color:#fc6721;
}


ul.flow{
    width:100%;
    text-align: center;
    z-index: 1000;
    padding: 0;
    left:0;
    background: #fff;
    box-shadow: 0 0 5px rgba( 0, 0, 0, 0.2 );
}

/*==================================
    table line
==================================*/
table.line{
    border-top: 2px solid #000;
    border-collapse: collapse;
    width:100%;
    margin: 0 0 30px 0;
    font-size:95%;
}
table.line th,
table.line td{
    border-bottom:1px solid #ccc;
}
table.line th{
    padding: 4px 4px;
    text-align:left;
    vertical-align:top;
}
table.line td{
    padding: 4px 4px 4px 8px;
    text-align:left;
    vertical-align:top;
}

/*==================================
    table grid
==================================*/
table.grid{
    border-top: 1px solid #ccc;
    border-left:1px solid #ccc;
    border-collapse: collapse;
    width:100%;
    margin: 0 0 30px 0;
    font-size:95%;
}
table.grid th,
table.grid td{
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}
table.grid th{
    padding: 8px 8px;
    text-align:left;
    vertical-align:top;
    width:10em;
    background-color: #efefef
}
table.grid td{
    padding: 8px 8px;
    text-align:left;
    vertical-align:top;
    background-color: #fff
}


/*==================================
    schedule
==================================*/
table.schedule{
    border-left:none;
}
table.schedule th{
    background-color: #333;
    color:#fff;
}
table.schedule td{
    border-right:none;
}


/*==================================
    topics_contents
==================================*/
div.topics_contents{
    overflow: hidden;
    margin-bottom: 30px;
}
div.topics_contents dd{
    padding:0;
}
/*==================================
    blog_item
==================================*/
.blog_item{
    padding: 50px 0;
    border-bottom:1px solid;
}
.blog_item:first-child{
    padding-top:0;
}
.blog_item:last-child{
    margin-bottom:30px;
}
.blog_item h1{
    margin:0 0 20px 0;
    font-size: 180%;
}
div.relation_link{
    padding:10px;
    background: #f5f5f5;
    margin-top: 20px;
    text-align: center;
}
span.blog_tit{
    display: inline-block;
    margin-left:10px;
}
span.blog_tit a{
    color:#fff;
    line-height: 140%;
    font-size: 14px;
    padding: 4px 10px;
    display: inline-block;
    background: #fc6721;
}

div.nextPage{
    padding: 30px 0;
    text-align: right;
}
ascide div.module a{
    color:#000;
}
ascide div.module a:hover{
    color:#fc6721;
}
/*==================================
    column
==================================*/
header.columnHeader{
    margin-bottom: 30px;
}
h1.columnTitle{
    font-size:160%;
    line-height: 170%;
}
div.titleImage{
    margin:0 0 30px 0;
}
div.titleImage img{
    display: block;
    width: 100%;
}
span.cat{
    display:inline-block;
    background: #000;
    color: #fff;
    padding: 2px 6px;
    font-size: 80%;
    line-height: 130%;
    margin-right: 5px;
    display: inline-block;
}


/*==================================
    module-list
==================================*/

ul.module-list li{
    margin-bottom:12px;
    border-top:1px dotted #ccc;
    padding: 10px 0;
    margin: 0 0 0;
}
ul.module-list li:last-child{
}
ul.module-list li a{
    color:#000;
}
ul.module-list li a:hover{
    color:#fc6721;
}
ul.module-list li date.date{
    font-size:85%;
    display: inline-block;
    margin-left:5px;
    color:#fff;
    background: #000;
    line-height: 1;
    padding: 3px 4px;
}
ul.module-list li time{
    background: #000;
    color:#fff;
    padding: 2px 6px;
    font-size:80%;
    line-height: 130%;
    margin-right:5px;
    display: inline-block;
}

/*==================================
    icon
==================================*/

a.newWindow{
    padding-left:22px;
    background:url(/img/common/icon_window.gif) no-repeat 7px 50%;
}


/*==================================
    input
==================================*/
input.textfield{
    padding:7px 10px;
    border:none;
    background: #efefef;
    width: 100%;
    box-sizing: border-box;
}
input.textfield:focus{
    background: #ff5611;
    color:#fff;
}
textarea.textarea{
    padding:10px;
    border:none;
    background: #efefef;
    width: 100%;
    box-sizing: border-box;
    height: 150px;
}

span.required{
    color:#ff5611;
    font-weight: bold;
    margin:0 0 0 10px;
}
/*==================================
    category
==================================*/
ul.category {
    padding: 10px 0;
    line-height: 130%;
    font-size: 80%;
}
ul.category li{
    display: inline-block;
    margin:0 3px 0 0;
    background: #000;
    color:#fff;
    padding: 3px 4px;
}

/*----------------------------------
    loading
----------------------------------*/

div.loadingBg{
    position: absolute;
    top:0;
    width:100%;
    height:100%;
    background: rgba( 0, 0, 0, 0.5 );
    background: #fff;
    z-index: 100000
}
div.loadingInner{
    background: #fff url(/img/common/loading_bg.gif) no-repeat 50% 50% ;
    background-size: 70px;
    width:70px;
    height: 70px;
    position: fixed;
    top: 50%;
    left:50%;
    z-index: 100001;
    margin:0px 0 0 -35px;
}
div.loadingBg div.logo{
    background-size: 100%;
    width:170px;
    height: 30px;
    position: fixed;
    top: 50%;
    left:50%;
    z-index: 100001;
    margin: -60px 0 0 -85px;
}

/*==================================
    grid
==================================*/
ul.grid {
    overflow: hidden;
    background-size: 96% auto ;
    box-sizing: border-box;
}
ul.grid > li{
    line-height:160%;
    box-sizing: border-box;
    float: left;
}
ul.grid > li a.link{
    color:#000;
}
ul.grid > li.hasLink{
    cursor: pointer;
}
ul.grid > li.hasLink:hover{
    opacity: 0.8
}
ul.grid > li img{
   display: block;
   width:100%;
}
ul.grid > li figcaption{
    padding: 5px 0;
}
ul.cols_2 {

}
ul.cols_2 > li{
    width:49%;
    margin:0.5%;
}
ul.cols_3{

}
ul.cols_3 > li{
    width:30.8333%;
    margin:1.25%;
}
ul.cols_4 {

}
ul.cols_4 > li{
    width:22%;
    margin:1.5%;
}
ul.cols_5 {

}
ul.cols_5 > li{
    width:18%;
    margin:1%;
}
ul.cols_6 {
}
ul.cols_6 > li{
    width:15.26%;
    margin:0.7% ;
}

ul.grid div.thumb{
    margin:0 0 10px 0;
}

/*==================================
    list
==================================*/
ul.listDisplay{
    margin:0 0 30px 0;
    border-top: 1px solid #000;
    padding-top: 20px ;
}
ul.listDisplay > li{
    width: 100%;
    float: none;
    margin:0;
    padding: 20px 10px 20px 10px;
    border-bottom: 1px dotted #ddd;
}
ul.listDisplay > li dd{
    display: block;
}

ul.listDisplay > li div.thumb{
    width: 150px;
    float: left;
}
ul.listDisplay > li div.detail{
    margin: 0 0 0 175px;
}
ul.listDisplay > li div.detail dl{
    font-size:120%;
    line-height: 160%;
}
ul.listDisplay > li ul.category{
    padding-top:0;
}


ul#displayNav{
    text-align: right;
    margin:0 0 20px 0;
}
ul#displayNav li{
    display: inline-block;
    line-height: 1 !important;
    padding: 5px ;
    cursor: pointer;
    background-color: #ccc;
    margin:0  0 0  0px;
}
ul#displayNav li.is_checked{
    opacity: 1;
    background-color: #ff5611
}
ul#displayNav span{
    display: block;
    overflow: hidden;
    text-indent: -999px;
    background-size: 13px;
    width: 32px;
    height:28px;
    box-sizing: border-box;
    line-height: 1 !important;
}
ul#displayNav li#thumbDisplay span{
    background: url(/img/common/icon/grid.png) no-repeat 50% 50%;
    background-size: 12px;
}
ul#displayNav li#listDisplay span{
    background: url(/img/common/icon/list.png) no-repeat 50% 50%;
    background-size: 12px;
}

ul#folioList{
    border-top: 2px solid #000;
    padding-top: 30px;
}



/*====================================================================
    div.pager
====================================================================*/

div.prev {
    overflow: hidden;
    padding-right: 20px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 20px;
}

div.prev a {
    background: #ddd none repeat scroll 0 0;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    float: right;
    padding: 10px;
    text-align: right;
    width: 35px;
}
div.prev a:hover {
    background: #00abeb none repeat scroll 0 0;
}
div.prev a img {
    display: block;
    width: 100%;
}
div.pager ul{
    text-align: center;
}
div.pager li{
    display: inline-block;
}
div.pager {
    font-size: 100%;
    padding: 20px 0;
}
div.pager li {
    display: inline;
    margin: 0 1.2% 0 0;
}
div.pager span.current_page {
    background: #00abeb none repeat scroll 0 0;
    color: #fff;
    padding: 6px 12px;
}
div.pager a {
    background: #efefef none repeat scroll 0 0;
    color: #333;
    padding: 6px 12px;
}
div.pager a:hover {
    background: #00abeb none repeat scroll 0 0;
    color: #fff;
}

/*====================================================================
    br
====================================================================*/
br.forTAB{
    display: none;
}
br.forPC{
    display: block;
}

/*====================================================================
    media query
====================================================================*/

/*
    TAB
*/
@media screen and (max-width: 768px){


    ul.cols_4 > li{
        width:29.3%;
        margin:0 2% 3%  2%;
    }
    ul.cols_5 li,
    ul.cols_6 li{
        width:29.3%;
        margin:0 2% 3%  2%;
    }
    ul.listDisplay > li{
        width:auto;
    }
    br.forPC{
        display: none;
    }
    br.forTAB{
        display: block;
    }
}

/*
    iphone landspcae
*/
@media only screen and (max-width: 736px) {

}

/*
    for header
*/
@media only screen and (max-width: 680px) {

}

/*
    SP
*/
@media screen and (max-width:479px) {
    /*==================================
        table grid
    ==================================*/
    table.grid{
       display: block;
    }
    table.grid th,
    table.grid td{
       display: block;
       width:auto;
    }
    table.grid th{
    }
    table.grid td{
    }
    table.grid tbody,
    table.grid tr{
        display: block;
    }

    br.forTAB{
        display: none;
    }
    ul.cols_2 > li{
        width:100%;
        margin:0.5% 0;
    }
    ul.grid > li {
    float: none;
    }

}