body,
html {
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

}

.color-whtie{color: #FFF}
.color-black{color: #000}

a:hover{text-decoration: none !important}

section {width: 100% !important}
.mobile-v{display: none}

/* header */
footer{background: #aeb2b7  url(../images/img-logo-b.svg) center center no-repeat;background-size: 16%  auto;position: relative;min-height: 320px}
.copyright{position: absolute;right: 20px;top:20px;}
.sub-text{position: absolute;left: 20px;top:20px;}
.btn-backtotop{position: absolute;right: 20px;bottom:20px;}
.footer-ss-list{position: absolute;left: 20px;bottom: 20px;margin-bottom: 0}
.footer-ss-list li,.menu-ss-list li{width: 24px;margin-right: 10px;float: left}

header{position: fixed;width: 100%;height: 50px;border-bottom: 1px solid #000;z-index: 9;background: #FFF}
.logo{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%)}
.logo img{width: auto !important;height: 15px}
.menu-btn{position: fixed;width: 15px;height: 15px;right: 15px;top:15px;background: url(../images/icon-menu.svg) center center no-repeat;background-size: contain;z-index: 10;cursor: pointer}
.menu-btn.white-on{background: url(../images/icon-menu-w.svg) center center no-repeat;background-size: contain;}
.menu-btn.active{background: url(../images/icon-close.svg) center center no-repeat;background-size: contain;}
.menu-wrap{position: fixed;width: 50vw;top:0;right: 0;height: 100%;background: #FFF;z-index: 9;transform: translateX(50vw);	transition: all .6s cubic-bezier(0.65, 0, 0.35, 1);opacity: 0;pointer-events: none}
.menu-wrap.active{transform: translateX(0);opacity: 1;pointer-events: auto}
.menu-wrap .main-menu{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);width: 100%;text-align: center}
.menu-wrap .main-menu li{margin: 40px 0}
.menu-wrap .menu-ss-list{position: absolute;left: 30px;bottom: 20px;}
.menu-wrap .main-menu a{color: #000}
.menu-wrap .main-menu a:hover{text-decoration: none}
#backToTop{cursor: pointer}

.page-inner-wrap{padding-top: 50px;margin-top: 30px}
.lang-btn{position: fixed;right: 50px;  top: 14px;z-index: 99}
.book-btn{position: fixed;right: 90px;  top: 14px;z-index: 99}
.lang-btn a,.book-btn a{color: #000}

/* Home */
.home-page-wrap header{transform: translateY(-50px);transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);}
.home-page-wrap header.active{transform: translateY(0px);}
.home-section-btn{position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);display: inline-block;background: #000;padding: 4px 10px ;border-radius: 18px}
.home-section-btn h5{margin-bottom: 0}
.home-section,.about-section{position: relative;min-height: 100vh;width: 100%;  display: flex;  justify-content: center;  align-items: center;  }
.home-landing-section{background: #aeb2b7 }
.home-landing-bg{background:  url(../images/img-logo-b.svg) center center no-repeat;background-size: 60%  auto;position: absolute;width: 100%;height: 100%;top:0;left: 0;display: none}
.home-landing-bg.active{opacity: 1;}
.home-slide-wrap{position: absolute;width: 100%;top:50%;left: 0;transform: translateY(-50%)}
.home-slide {width: 1000%}
.home-slide{margin-left: 100vw;}
.home-slide-inner{transform: translateX(-20vw);transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);}
.home-slide-inner.loading{transform: translateX(-9400px);}

.home-slide-inner.highlight{transform: translateX(-20vw);}
.home-slide{transition: all .2s linear;}
.home-slide li{ width: 40vw;margin: 0 90px;float: left}
.home-slide li {transform: rotate(10deg);padding:0 60px}
.home-slide li:nth-child(odd) {transform: rotate(-10deg);}

.home-date{position: absolute;left: 20px; top:20px}
.home-exhibition-title{position: absolute;top:30px;left: 0}
.home-exhibition-title h1{line-height: .9;margin-bottom: 0}

.home-exhibition-title h5{padding: 0 30px}
.home-events-section {background: #594f59;overflow: hidden}
.home-events-bg{position: absolute;width: 100%;height: 100%;background:#ccb8aa;border-top-left-radius: 30vw ;border-bottom-left-radius: 30vw ;border-top-right-radius: 30vw ;border-bottom-right-radius: 30vw ;}
.home-timeline{position: relative;height: 72vh;overflow: hidden}
.home-timeline-list{padding-left: 120px;padding-right: 120px}
.home-timeline-list li{padding-left: calc(50% + 60px);margin-bottom: 40px;overflow: hidden;position: relative}
.home-timeline-list::before{content:"　";height: 100%;width:  1px;background: #000;left: 50%;top:0;position: absolute}
.home-timeline-list::after{content:"　";width: 20px;height: 1px;background: #000;left: calc(50% - 10px);bottom:0;position: absolute}

.home-timeline-list li::before{content:"　";width: 20px;height: 1px;background: #000;left: calc(50% - 10px);top:0;position: absolute}
.home-timeline-list li:nth-child(even){padding-left: 0;padding-right:calc(50% + 60px);text-align: right }
.home-event-thum{width: 10vw;height: 10vw;background: #EEE;margin-right: 20px;float: left}
.home-timeline-list li:nth-child(even) .home-event-thum{float: right;margin-left: 20px;margin-right: 0 }

.home-about-section{background: url(../images/home-about-bg.svg) center center no-repeat;background-size:   auto 80%}
.home-exhibition-section .owl-carousel-exh{width: 100% !important;margin-left: 0% !important;margin-top: 60px}
.home-exhibition-section .owl-dots{margin-top: 0 !important}
.home-exhibition-section .owl-item .home-about-info{opacity: 0}

.home-exhibition-section .owl-item.center .home-about-info{opacity: 1}
.home-exhibition-title,
.home-section .owl-carousel-exh,
.home-events-title,
.home-timeline-list,
.home-about-title,
.home-about-content{opacity: 0;transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);}
.home-section .owl-carousel-exh,
.home-timeline-list,
.home-about-content

{transition-delay: 1s;}

.home-section.active .home-exhibition-title,
.home-section.active .owl-carousel-exh,
.home-section.active  .home-events-title,
.home-section.active  .home-timeline-list,
.home-section.active  .home-about-title,
.home-section.active  .home-about-content{opacity: 1}




/* gallery */
.cat-wrap{display: inline-block;border: 1px  solid #000;padding-left: 10px;padding-right: 10px;border-radius: 12px}
.pattern-thum,.pattern-inner-img{width: 100%;margin-bottom: 20px;aspect-ratio: 1 / 1;background: #EEE}
.clearfix{width: 100%;height: 1px;margin-bottom: 30px}
.filter-button,.pattern-gallery-item{cursor: pointer}
.filter-button.active h5{text-decoration: underline}
.filter-button.no-click{pointer-events: none}
.tc-content  .cat-wrap{padding-top: 2px}

/* exhibtion */
.section-height{width: 100%;position: relative;min-height: calc(100vh - 320px)}
.owl-carousel-wrap{  display: flex;
    justify-content: center; /* Horizontally align center */
    align-items: center;    /* Vertically align center */
}


.owl-carousel-main{width: 140%;margin-left: -20%}
.owl-dots {display: block !important;position: relative; width: 100%;text-align: center;}
.owl-dot {display: inline-block;width: 10px;height: 10px;margin: 0 5px;background: #ccc;border-radius: 50%;cursor: pointer;}
.owl-carousel-main .owl-dots{margin-top: 60px;margin-bottom: 30px}
.owl-dot.active {background: #000;}
.owl-arrow-left{position: absolute;left: 20px;top: calc(50% - 40px);transform: translateY(-50%);width: 15px;cursor: pointer}
.owl-arrow-right{position: absolute;right: 20px;top: calc(50% - 40px);transform: translateY(-50%);width: 15px;cursor: pointer}


/* about */
.about-content-text{position: absolute;width: 100%;bottom: 40px}
.about-section-2 .bg-right{position: absolute;right: -80vw;top:80px;transition: all .6s cubic-bezier(0.65, 0, 0.35, 1);}
.about-section-2 .bg-left{position: absolute;left: -80vw;top:80px;transition: all .6s cubic-bezier(0.65, 0, 0.35, 1);}
.about-section-2.active .bg-right{right: -25vw;}
.about-section-2.active .bg-left{left: -25vw;}

.bg-right img,.bg-left img{width: 50vw}
.about-section-3 span {width: 64px;display: inline-block;margin: 0 30px}
.about-section-3 span img{margin-top: -10px}
.about-section-3 .about-content-text{bottom: auto;top:50%;transform: translateY(-50%)}
.about-section-3 .about-section-title{mix-blend-mode: soft-light;}
.about-section-3 .about-section-title .row{opacity: .6}

.about-section-1{background: #480d2a ;position: relative }
.about-section-1bg{background: url(../images/img-about-1.svg) center center no-repeat;background-size: auto calc(100vh - 120px);position: absolute;width: 100%;height: 100%;top:0;left: 0;transform-origin: center center;opacity: 0;transition: all .6s cubic-bezier(0.65, 0, 0.35, 1);transition-delay: .3s;}
.about-section-2{background: #594f59;position: relative}
.about-section-2 .about-section-title img{width: auto !important;height: 76px !important;margin-bottom: 180px !important}

.about-section .about-section-title,.about-section .about-content-text{opacity: 0;transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);}
.about-section .about-content-text{transition-delay: .6s;}
.about-section.active .about-section-title,.about-section.active .about-content-text{opacity: 1;}

.about-section.active .about-section-1bg{opacity: 1;}
/* popup */
.popup-btn{cursor: pointer}
.popup-box{position: fixed;width: 100%;height: 100%;top:0;left: 0;z-index: 99;pointer-events: none;opacity: 0;transition: all 1.2s cubic-bezier(0.65, 0, 0.35, 1);}
.popup-box.active{pointer-events: auto;opacity: 1}
.popup-box-bg{position: absolute;width: 100%;height: 100%;background: rgba(89,79,89,.7);top:0;left: 0;cursor: pointer}
.popup-box-inner{background: #FFF;position: absolute;width: 80vw;height: 80vh;top:50%;left: 50%;transform: translate(-50%,-50%);padding: 5vw 30px}
.popup-box-inner .pattern-inner-img{width: 100%;/* height: 56vh !important; */}
.popup-close{position: absolute;right: 30px;top:30px;width: 15px;height: 15px;background: url(../images/icon-close.svg) center center no-repeat;background-size: contain;cursor: pointer }