@charset "utf-8";
/*----------------------------------------------------

共通のオブジェクト

----------------------------------------------------*/
body{
    font-size: 1.6rem;
    font-family: "source-han-serif-japanese";
}

/*----------------------
ruby
-----------------------*/
rt {
    letter-spacing: 0;
    transform: scale(0.9) translateY(20%);
}
figcaption{
    font-size: 0.7em;
}

/*----------------------
コメント　小
-----------------------*/
.is--pc{
    display: block;
}
.is--sp{
    display: none;
}
/*----------------------------------------------------

Color

----------------------------------------------------*/
body {
    background: #fff;
    color: #000;
}
.bg--light {
    background: #fff;
    color: #000;
}
.bg--dark {
    background: #000;
    color: #e0e0dc;
}
/*----------------------
gnav
-----------------------*/
.bg--dark .gnav li a.hover{
    border-bottom: 1px solid #e0e0dc;
}
.bg--dark .gnav li a{
    color: #e0e0dc;
}

.bg--dark .nav_sns a {
/*    border: 1px solid #000;
*/}
.bg--dark  .ttl--page{
    color: #000;
    background: #e0e0dc;
    border: 1px solid #e0e0dc;
}
/*----------------------------------------------------

font

----------------------------------------------------*/
.font--XS {
    font-size: 0.8rem !important;
}
.font--S {
    font-size: 1.2rem !important;;
}
.font--L {
    font-size: 1.7rem !important;;
}
.font--XL {
    font-size: 2.1rem !important;;
}
.font--center{
    text-align: center;
}
.font--bold{
    font-weight: bold;
}
.font--attention{
    font-size: 2rem;
    font-weight: bold;
}
/*----------------------------------------------------

ttl

----------------------------------------------------*/
.ttl_wrap{
    position: fixed;
    left: 80px;
    top: 40px;
}
.logo_subpage{
    width: 44px;
    margin-bottom: 10px;
    
}
.logo_subpage a img{
    transition:all 1s linear;
    -webkit-transform:scale(1);
        -ms-transform:scale(1);
            transform:scale(1);
}
.logo_subpage a.hover img{
    -webkit-transform:scale(1.1);
        -ms-transform:scale(1.1);
            transform:scale(1.1);
}
.logo_subpage img{
    margin:0;
}
.ttl--page {
    /*font-size: 2rem;*/
    font-size: 2.2rem;
    margin-left: 5px;
    color: #fff;
    border: 1px solid #000;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    writing-mode: vertical-rl;
    -webkit-writing-mode: tb-rl;
    -moz-writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;
    letter-spacing: 0.4rem;
    background: #000;
    position: relative;
    padding: 10px 5.8px 5px 6.2px;
    /*padding: 10px 6px 5px;*/
    width: 34px;
    display: inline-block;
}
/*----------------------------------------------------

ttl Eng

----------------------------------------------------*/
.ttl {
    font-size: 4rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}
.ttl.is--serif{
    font-family: "ltc-bodoni-175";
    font-weight: normal;
}
.ttl .small{
    display: block;
    font-size: 1.4rem;
}
.ttl.is--serif .small{
    font-family: "source-han-serif-japanese";
}
.ttl.is--serif.inline .small{
    display: inline;
    padding-left: 10px;
}

/*----------------------------------------------------

img

----------------------------------------------------*/
.img--responsive {
    width: 100%;
}
.thumb--sq,
.thumb--rect,
.thumb--rectH,
.thumb--rect_flat{
    overflow: hidden;
    position: relative;
}
.thumb--sq:before,
.thumb--rectH:before,
.thumb--rect:before,
.thumb--rect_flat:before,
.thumb--rect_long:before {
    content: "";
    display: block;
}
.thumb--sq:before {
    padding-top: 100%;
}
.thumb--rectH:before {
    padding-top: calc(100% * 4 / 3);
}
.thumb--rect:before {
    padding-top: calc(100% * 2 / 3);
}
.thumb--rect_flat:before{
    padding-top: 50%;
}
.thumb--sq img,
.thumb--rectH img,
.thumb--rect img,
.thumb--rect_flat img{
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    display: block;
}
.hover .thumb--sq img,
.hover .thumb--rectH img,
.hover .thumb--rect img,
.hover .thumb--rect_flat img{
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}
/*----------------------------------------------------

body BG image

----------------------------------------------------*/
/*----開催概要----*/
.page-template-outline{
    background: 
    url(../img/bg_out_r.png) right 180px / auto calc(100vh - 180px) no-repeat fixed
}
/*----見所----*/
.page-template-highlight{
    background: url(../img/bg_hi_l.png) 40px 310px / auto calc(100vh - 180px) no-repeat fixed,
                url(../img/bg_hi_r.png) right 180px / auto calc(100vh - 180px) no-repeat fixed;
}
.page-template-manga{
    background: url(http://cdn.unkei2017.jp/wp-content/themes/ver4.6.0/img/bg_manga_l.png) left 180px / auto calc(100vh - 180px) no-repeat fixed,
                url(http://cdn.unkei2017.jp/wp-content/themes/ver4.6.0/img/bg_manga_r.png) right 180px / auto calc(100vh - 180px) no-repeat fixed;
    background-color:#ffef00;
}

/*----------------------------------------------------

news

----------------------------------------------------*/
.news-wrap{
    margin-top: 1rem;
    padding: 2.8rem 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.news-item{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: #000;
}
.news-item > div{
    -webkit-flex:1;
        -ms-flex:1;
            flex:1;
}
/*----------------------
thumb-post
-----------------------*/
.box--news_data .thumb-post{
    width: calc(100% / 3);
}
.thumb-post{
    border: 1px solid #666;
    position: relative;
}
.thumb-post:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border:7px solid #fff;
    box-sizing: border-box;
}
/*----------------------
cat-post
-----------------------*/
.cat-post{
    line-height: 1;
    font-size: 1.2rem;
    padding:0.5rem 0.5rem 0.3rem;
    letter-spacing: 0;
    z-index: 3;
}
.cat-post.cat_01{
    color: #fff;
    background: #204654;
}
.cat-post.cat_02{
    color: #fff;
    background: #765c3b;
}
/*----------------------
body-post
-----------------------*/
.body-post{
    padding-left: 12px;
    -webkit-flex:1;
        -ms-flex:1;
            flex:1;
    position: relative;
}
.body-post time{
    color: #999;
    font-size: 1.2rem;
}
.news-item:hover time{
    text-decoration: none;
}
/*----------------------------------------------------

outline

----------------------------------------------------*/
.list--outline li {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px dotted #999;
}
.list_ttl {
    width: 10em;
    font-size: 1.5rem;
    line-height: 1.5;
}
.list_body {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    position: relative;
}
.img_map{
    margin-bottom: 2rem;
}
/*----------------------------------------------------

Highlight

----------------------------------------------------*/
.page-template-highlight{
    font-size: 1.8rem;
}
.page-template-highlight h3,.page-template-ticket h3{
    font-size: 1.6em;
    line-height: 3.6rem;
    letter-spacing: 0.1em;
    font-weight: bold;
}
/*----------------------------------------------------

Ticket

----------------------------------------------------*/
.list--ticket{
    margin-bottom: 1em;
}
.list--ticket li{
    margin-bottom: 0.7em;
    padding-bottom: 0.7em;
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #000;
}
.list--ticket li > div{
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    text-align: center;
    vertical-align: middle;
}
.list--ticket li > div:first-child{
    text-align: left;
    font-weight: bold;
    padding-top: 0.4rem
}
.txt--price{
    font-size: 1.8rem;
}
/*----------------------------------------------------

bnr_official_wrap

----------------------------------------------------*/
.bnr_official_wrap{
    padding: 4rem 0;
    line-height: 0;
    background: #efefef;
    text-align: center;
}
.bnr_official{
    display: inline-block;
}
.bnr_official.hover{
    transform:scale(1.07);
}
/*----------------------------------------------------

Banners

----------------------------------------------------*/
.banners{
    border-top: 2px solid #545454;
    padding: 0 8rem;
    background: #000;
}
.banners ul{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
    border-left: 1px solid #545454;
    border-right: 1px solid #545454;
}
.banners li{
    -webkit-flex:1;
        -ms-flex:1;
            flex:1;
}
.banners li + li{
    border-left: 1px solid #545454;
}
.banners li a{
    display: block;
    line-height:0;
    width: 100%;
    height: 100%;
}
.banners a.hover img{
    transform:scale(1);
}
.banners .active a.hover{
    transform:scale(1.07);
}
.bnr_footer_01 a{
    background: #545454;
}
.bnr_footer_02 a{
    background: #000;
}
.bnr_footer_comming a{
    background: #222;
}
.banners li img{
    width: 100%;
    line-height: 0;
}
/*----------------------------------------------------

Footer

----------------------------------------------------*/
.copyright{
    margin-right: auto;
    color: #666;
    -webkit-flex:1;
        -ms-flex:1;
            flex:1;
}
.copyright li{
    font-size: 1.1rem;
    line-height: 1.3;
}
.sponsor{
    -webkit-flex:2;
        -ms-flex:2;
            flex:2;
    text-align: right;
}
.sponsor li{
    display: inline-block;
}
.sponsor li + li{
    margin-left: 15px;
}
.sponsor img{
    height: 28px;
    width: auto;
}
/*----------------------------------------------------

window border

----------------------------------------------------*/
.border-T,
.border-B,
.border-L,
.border-R{
    position: fixed;
    background-color: #b5a077;
}
.border-T,
.border-B{
    width: 100vw;
    height: 8px;
    left: 0;
}
.border-T { top: 0; }
.border-B { bottom: 0; }

.border-L,
.border-R{
    width: 8px;
    height: 100vh;
    top: 0;
}
.border-L { left: 0; }
.border-R { right: 0; }