/*
--- top-mob ------
--- gen ----------
--- left ---------
--- right --------
--- footer -------
--- bottom -------

// 小デバイス（横向きモバイル, 576px 以上） @media (min-width: 576px) { ... }
中デバイス（タブレット, 768px 以上） @media (min-width: 768px) { ... }
// 大デバイス（デスクトップ, 992px 以上） @media (min-width: 992px) { ... }
// 特大デバイス（ワイド・デスクトップ, 1200px 以上） @media (min-width: 1200px) { ... }

@vue
    buttonsHeight---左カラム「english, twitter, facebook」の高さ
    kiHeight--------左カラム「ki」の高さ
    titleHeight-----右カラム 「木組み〜〜」の高さ
    onPc------------PCであるか否か vp >767
    mobBoxH---------モバイル時のカバー高さ
 */

 * {
     margin: 0;
     padding: 0;
     border: none;
     box-sizing: border-box;
     font-size: 14px;
     line-height: 22px;
     font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",
         "Yu Gothic", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック",
         "MS PGothic", "Helvetica Neue", sans-serif;
 }
 @media (min-width: 768px){
     * {
         font-size: 15px;
         line-height: 29px;
     }
 }
div, img {
    display: block;
}

a img {
    transition-duration: 0.5s;
}
a:hover img {
    opacity: 0.5;
}


#loading {
    width: 100vw;
    height: 100vh;
    background-color: #FFF;
    position: fixed;
    left: 0;
    z-index: 9000;
}
#loading .loader{
    top: 40vh;
}
#loading p{
    position: absolute;
    top: 60vh;
    width: 100%;
    text-align: center;
}



.v-enter-active, .v-leave-active{
    transition: opacity 0.5s;
}
.v-enter, .v-leave-to {
    opacity: 0;
}
/*///--- top-mob ----------------------------------------------///*/

#top-mob {
    background-image: url('https://ko.dougukan.jp/kigumi/top/dist/fig_mob_back.jpg');
    background-size: cover;
    width: 100%;
    background-color: #333;
    position: relative;
    margin-bottom: 0em;
}
#top-mob .main-block {
    width: 52%;
    margin-left: 36.2%;
    position: absolute;
    bottom: 0px;
}
#top-mob .main-block .title-nihon {
    width:25%;
    height: 15.3%;
    margin-top: 2%;
    /*display: none;*/
}
#top-mob .main-block .title-nihon img{
    width:100%;
    height: 2em;
    margin-right: 0.5em;
    /*display: none;*/
}



#top-mob .main-block .date-main {
    width: 100%;
    margin-top: 7.95%;
}
#top-mob .main-block .date-list {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    width: 100%;
    height: 2em;
}
#top-mob .main-block .date-list a {
    display: block;
    height: auto;
}
#top-mob .main-block .date-list a.kb { width: 17%; }
#top-mob .main-block .date-list a.ngy { width: 26.4%; }
#top-mob .main-block .date-list a.tky { width: 19.8%; }
#top-mob .main-block .date-list a.hrs { width: 19.8%; }
#top-mob .main-block .date-list a.spr { width: 17%; }


#top-mob .main-block .date-list img {
    width: 100%;
    height: 100%;
    /*height: 100%;*/
}
#top-mob .main-block p img{
    margin-top: 13.6%;
    height: 1.5em;
    margin-left: auto;
    margin-right: 0;
}

/*///--- gen ----------------------------------------------///*/




/*   vp < 768   */
#app {
    display: flex;
    flex-wrap: wrap;
    width:100%;
    max-width: 1000px;
}
@media (min-width: 768px){
    #app {
        width: 80%;/*88.8*/
        margin: 0 10%;
    }
}
@media (min-width: 1200px){
    #app {
        width: 60%; /*66.6*/
        margin: 0 20%;
    }
}

#top-figure {
    display: flex;
    flex-direction: column-reverse;
}
#top-figure .topcolumn.left, .topcolumn.right {
    margin: 0 auto;
}

#top-figure .topcolumn.right {
    width: 100%;
}
#top-figure .topcolumn.left {
    width: 80%;
}

@media (min-width: 768px){

    #top-figure {
        background-image: url('https://ko.dougukan.jp/kigumi/top/dist/back_shadow.jpg');
        background-size: cover;
        background-color: #fff;
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    #top-figure .topcolumn.left, #top-figure .topcolumn.right {
        width: 37.5%;
        align-self: stretch;
    }
    #top-figure .topcolumn.left {
        /*background-color: #D8D7D5;*/
    }
    #top-figure .topcolumn.center {
        width: 25%;
        overflow: hidden;
        background-image: url('https://ko.dougukan.jp/kigumi/top/dist/fig_pillar_all.png');
        background-size: cover;
    }
}



/*///--- left -----------------------------------------------------///*/



.topcolumn.left .buttons {
    width: 100%;
    /*height: 80px;*/
    /*background-color: #AAA;*/
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 0 1em 1em;
}


.topcolumn.left .buttons ul.venue-news {
    width: 40%;
}
.topcolumn.left .buttons ul.venue-news li {
    padding-right: 0.5em;
    font-weight: bold;
    color: red;

}
.topcolumn.left .buttons ul.venue-news li.news {
    color: red;
}


.topcolumn.left .buttons ul.other {
    width: 100%;
    justify-content: flex-end;
}
.topcolumn.left .buttons ul {
    display: flex;
    flex-wrap: wrap;
}

.topcolumn.left .buttons ul li {
    height: 2.5em;
    list-style: none;
    display: flex;
    align-items: center;
    margin-left: 2.5%;
    /*old -0.5em*/
}

.topcolumn.left .buttons ul li.nihonhaku {
    width: 14%;
    margin-right:15%;
    margin-left: 0%;
}

.topcolumn.left .buttons ul li.sn {
    width: 10%;
}

.topcolumn.left .buttons ul li.sn2 {
    width: 14%;
}
.topcolumn.left .buttons ul li.bt {
    width: 27%;
}


.topcolumn.left .buttons ul li img {
    width: 100%;
    min-height: 2em;

}



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

.topcolumn.left .data-box {
    position: relative;
}




.topcolumn.left .menu {
    width: 100%;
    margin: 2em 0 4em 0;
    padding: 0;
}


@media (min-width: 768px){
    .topcolumn.left .menu {
        margin: 0;
        position: absolute;
        z-index: 1000;

        font-size: 90%;
    }
    .topcolumn.left .menu .menu-group {
        width: 90%;
        /*max-height: 250px;*/
        margin: 1em 5%;
        padding: 0.75em 1em;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0px 0px 10px rgba(100,100,100,0.4);
        border-radius: 3px;
    }
}


.topcolumn.left .ch-mi {
    position: absolute;
    /*top: -1.85em;*/
}

.menu h2 {
    width: 100%;
    color: #AAA;
    background-color: #FFF;
    margin-bottom: 2em;
}
@media (min-width: 768px){
    .menu h2 {
        width: 100%;
        color: #AAA;
        background-color: #333;
        margin-bottom: 0.5em;
    }
}
@media (max-width: 767px){
    .menu h2 img {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3em;
    }
}

@media (min-width: 768px){
    .menu h2 img {
        height: 1.2em;
        margin-left: 0;
    }
}


.topcolumn.left .menu li{
    list-style: none;
    flex: none;
}
.menu ul + h2 {
    margin-top: 1.5em;
}

/*-----------------------------------*/
.menu .venue li img {
    width: 90%;
    margin-bottom: 0.75em;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px){
    .menu .venue li img {
        width: 100%;

        margin-bottom: 0;
    }
}
/*-----------------------------------*/
.menu .news li {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 0.3em;
    padding-top: 0.3em;
    font-size: 100%;
    line-height: 1.6em;
}
@media (min-width: 768px){
    .menu .news li {
        font-size: 80%;
        flex-wrap: wrap;
    }
}
.menu .news li +li {
    border-top: solid 1px #333;
}
.news a, span {
    display: block;
    margin-right: 1em;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    color: #333;
}
@media (min-width: 768px){
    .news a, span {
        width: 100%;
    }
}
.menu .news .news-bn a{
    margin-right: 0;
    padding-top: 0.5em;
    width: 100%;
}
.menu .news .news-bn{
    text-align: right;
    margin-bottom: 0;
}



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


.menu .overview {
    margin: 5em auto;
    border: solid 1px #333;
    border-radius: 4px;
    box-shadow: 0px 0px 10px rgba(100,100,100,0.4);
}
.menu .overview a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.menu .overview img {
    margin: 1.5em auto;
    width: 30%;

}



/*///--- right -----------------------------------------------------//*/

.topcolumn.right .title {
    width: 100%;
    align-items: center;
    display: block;
}
.topcolumn.right .title h1 img {
    width: 30%;
}




@media (min-width: 768px){
    .topcolumn.right .title {
        width: 100%;
        align-items: center;
        display: block;

    }
    .topcolumn.right .title h1 img {
        width: 100%;
        transform: scale(0.8) translate(0%, 5%);;
    }
    .topcolumn.right .title .title-nihon {
        width: 24.4%;
        height: 15%;
        position: relative;
        z-index: 500;
        bottom:8%;
        left:10%;
        /*display: none;*/
    }


    .topcolumn.right .title .title-nihon img{
        width: auto;
        height: 3em;
        margin-right: 0.5em;
        flex-shrink: 0;
        /*display: none;*/
    }
    .topcolumn.right .title .title-nihon img.nihon{
    /*    width: 4.758em;*/
    }
    .topcolumn.right .title .title-nihon img.beyond2020{
    /*    width: 2.477em;*/
    }
}

.topcolumn.right .description {
    width: 80%;
    padding-top: 2em;
    padding-left: 0;
    padding-bottom: 1em;
    margin-left: auto;
    margin-right: auto;

}
@media (min-width: 768px){
    .topcolumn.right .description {
        width: 100%;
        padding-top: 2em;
        padding-left: 8.7%;
        padding-right: 8.7%;
        padding-bottom: 1em;
    }
}

.description img {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px){
    .description img {
        width: 100%;
    }
}

.topcolumn.right img {
    margin-bottom: 1.5em;
}

/*///--- footer -----------------------------------------------------//*/
/*
#footer {
    background-color: #393737;
    width: 100%;
}

#footer p {
    line-height: 1.2em;
}



#footer ul {
    margin: 1em auto 0 auto;
    text-align: center;
}



#footer li {
    display: inline-block;
    list-style: none;
    color: #AAA;
    font-size: 70%;
    vertical-align: middle;
    line-height: 1em;
}



#footer a {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
}
#footer a:hover {
    background-color: #555;
}


#footer .bt {
    height: 2em;
    margin-right: 1em;
}
#footer .sn {
    height: 1.2em;
    margin-left: 0.1em;
}

.lstg + .sns {
        margin-left: 1.5em;
}

 .lstg + .lstg {
     border-left: solid 0.1em #AAA;
     margin-left: 0.4em;
     padding-left: 0.6em;
 }
#footer .cr {
    display: block;
    font-size: 50%;
    letter-spacing: 0.2em;
    color: inherit;
    color: #AAA;
    margin: 0.5em auto 1em auto;
    text-align: center;
}

@media (max-width: 767px){
    #footer ul {
        width: 90%;
        height: 3em;
        position: relative;
    }
    #footer li {
        display: block;
        position: absolute;
    }
    #footer .sns {
        top: 0.5em;
        right: 0px;
    }
    #footer .sns2 {
        top: 0.5em;
        right: 4em;
    }
    #footer .bt {
        height: 3em;
        margin-right: 1em;

    }
    #footer .sn {
        height: 2.2em;
        margin-left: 0.1em;
    }

    #footer p.cr {
        width: 90%;
        padding-top:  1em;
        font-size: 0.6rem;
        line-height: 1.5em;
        margin-bottom: 2em;

    }

}
*/

/*///--- bottom -----------------------------------------------------///*/
#overview {
    display: none;
    cursor:  pointer;
}
@media (min-width: 768px){
    #overview {
        width:100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #overview .thumb {
        width: 50%;
        transition-duration: 0.5s;
        display: block;
    }
    #overview .thumb.thumb-l {
        width: 100%;
    }
    #overview .thumb:hover {
        opacity: 0.5;
    }
    #overview .head {
        width: 100%;
        height: 2.5em;
        background-color: #393737;
    }
    #overview .head img{
        height: 2.5em;
        margin: 0 auto;
    }
}

/*///--- animation -----------------------------------------------------//*/


@keyframes pop {
  0% { transform: scale(0.8) ; opacity: 0;}
  100% { transform: scale(1) ; opacity: 1;}
}

.animation {
    animation-name: pop;  /**/
    animation-direction: normal;
    animation-duration: 0.8s;  /*アニメーションのスピード*/
    animation-timing-function: linear;  /*加速の付き方*/
    /*animation-delay: 0s;  /*実行遅延()*/
    animation-iteration-count: 1;  /*繰り返し回数*/
    animation-direction: alternate;;   /*実行される方向 正方向、逆方向、実行毎に反対（初回正）、実行毎に反対（初回逆）*/
    animation-fill-mode: forwards;   /*実行の前後の状態はキーフレームのどの状態であるか*/
    animation-play-state: running;   /*アニメーションの実行状態*/
}
.first {
    animation-delay: 0s;  /*実行遅延()*/
}
.second {
    animation-delay: 0.2s;  /*実行遅延()*/
}
.third {
    animation-delay: 0.4s;  /*実行遅延()*/

}