@charset "utf-8";

header {border-color:#fff}
header > div .nav li a span {color:#eee6e3 !important}
header h1 a {background-image: url(../images/logo_new.png)}

.mainVisual {position:relative;width:100%;height:calc(100vh - 80px)}
.mainVisual > .inner {width:fit-content;height:100%;margin:0 auto;display:flex;align-items: center;justify-content: flex-end;flex-direction: column;padding-bottom: 140px;}
.mainVisual > .inner > div {display:flex;justify-content: center;align-items: center;width:100%;letter-spacing:5px}
.mainVisual > .inner > div:nth-child(2) {margin-top:30px;width: 410px;justify-content: space-between;letter-spacing:4px}
.mainVisual > .inner > div:nth-child(3) {width: 410px;justify-content: space-between;}
.mainVisual > .inner span {font-family: 'Gatena';font-size:32px;color:#eee6e3;position:relative;display:inline-block}
.mainVisual > .inner .blur {filter: blur(7px)}
.mainVisual > .inner span img {width:700px}
.mainVisual .scrollBox {position:absolute;left:50%;bottom:30px;transform:translateX(-50%);animation: updown2 3s linear infinite}
.mainVisual .scrollBox a {display:inline-block;width:27px;height:67px;padding-bottom:25px;font-size:0;position:relative;background:url(../images/main/ico_scroll.png) no-repeat 0 0/100%}
.mainVisual .scrollBox a:before {content:'';display:block;position:absolute;width:18px;height:9px;bottom:7px;left:50%;background:url(../images/main/ico_arrow.png) no-repeat 0 0/100%;transform:translateX(-50%)}
.mainVisual .scrollBox a:after {content:'';display:block;position:absolute;width:18px;height:9px;bottom:0;left:50%;background:url(../images/main/ico_arrow.png) no-repeat 0 0/100%;transform:translateX(-50%)}
.bgBox {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;animation: fadeIn .5s ease 3.5s both;}
.cover {position:fixed;top:0;left:0;width:100%;height:100vh;overflow:hidden;background:#602a19;animation: slideInUp 1s cubic-bezier(.5,.8,.2,1) 4s both;}
.bgBox .slideBox {width:100%;height:100vh;background-size:cover}

.thumBox {width:100%;padding-bottom:70px}
.thumBox > .inner {position:relative;width:100%;padding:100px 0;margin:0 auto;max-width:1200px;border-bottom:1px solid #8c422a}
.thumBox > .inner .listBox {display:flex;flex-wrap: wrap;}
.thumBox > .inner .listBox li {flex:1 0 calc(100%/3)}
.thumBox > .inner .listBox li:nth-child(n+4) {margin-top:90px}
.thumBox > .inner .listBox li a {display:block;}
.thumBox > .inner .listBox li a .imgBox {width:100%;overflow:hidden}
.thumBox > .inner .listBox li a .imgBox img {width:100%;transition:all 0.5s ease}
.thumBox > .inner .listBox li a:hover .imgBox img {transform:scale(1.1)}
.thumBox > .inner .listBox li a .txtBox {margin-top:30px}
.thumBox > .inner .listBox li a .txtBox em {display:block;text-align:center;font-size:22px;color:#1b1c1c;font-weight:300;letter-spacing:-1px}
.thumBox > .inner .listBox li a .txtBox span {margin-top:10px;display:block;text-align:center;font-size:11px;color:#8c422a;text-decoration:underline;font-family: 'Gatena';letter-spacing:0.5px}
.thumBox > .inner .moreBtn {position:absolute;display:block;bottom:-25px;left:50%;width:50px;height:50px;font-size:0;border-radius:50%;border:1px solid #8c422a;background-color:#fff;transform:translateX(-50%)}
.thumBox > .inner .moreBtn:before {content:'';position:absolute;display:block;width:20px;height:2px;top:50%;left:50%;background-color:#8c422a;transform:translate(-50%,-50%);transition:all .5s ease}
.thumBox > .inner .moreBtn:after {content:'';position:absolute;display:block;width:2px;height:20px;top:50%;left:50%;background-color:#8c422a;transform:translate(-50%,-50%);transition:all .5s ease}
.thumBox > .inner .moreBtn:hover:before {transform:translate(-50%,-50%) rotate(90deg)}
.thumBox > .inner .moreBtn:hover:after {transform:translate(-50%,-50%) rotate(90deg)}

@-webkit-keyframes updown2 {
    0%{
        transform:translate(-50%,0)
    }
    50%{
        transform:translate(-50%,-20px)
    }
    100%{
        transform:translate(-50%,0)
    }
}

.animate1 {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: all 1.5s;transition-delay:1s !important
}
.animate1.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
 .animate2.visible .blur {transition-delay:3.5s !important;transition: all 0.3s;
  filter:none
}
.animate3 {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0 !important;
  transition: all 1.5s;
}
.animate3.visible {
  opacity: 1 !important;transition-delay:3s !important
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.delay1 {transition-delay:0.1s !important}
  .delay2 {transition-delay:0.2s !important}
  .delay3 {transition-delay:0.3s !important}
  .delay4 {transition-delay:0.4s !important}
  .delay5 {transition-delay:0.5s !important}
  .delay6 {transition-delay:0.6s !important}
  .delay7 {transition-delay:0.7s !important}
  .delay8 {transition-delay:0.8s !important}
  .delay9 {transition-delay:0.9s !important}
  .delay10 {transition-delay:1s !important}
  .delay11 {transition-delay:1.1s !important}
  .delay12 {transition-delay:1.2s !important}
  .delay13 {transition-delay:1.3s !important}
  .delay14 {transition-delay:1.4s !important}
  .delay15 {transition-delay:1.5s !important}
  .delay16 {transition-delay:1.6s !important}
  .delay17 {transition-delay:1.7s !important}
  .delay18 {transition-delay:1.8s !important}
  .delay19 {transition-delay:1.9s !important}
  .delay50 {transition-delay:5s !important}

  @keyframes slideInUp {
  0% {
    height: 100%;
  }

  100% {
    height:0;
  }
} 

 
@keyframes fadeIn {
  0% {
    opacity:0;
  }

  100% {
    opacity:1;
  }
}  





@media(max-width: 1024px) {

		.MobileNav .mBtn span {background: #fff;}

		.mainVisual {height:  calc(var(--vh, 1vh) * 100 - 12.78vw);}
		.mainVisual > .inner {padding-bottom: 19.44vw;}
		.mainVisual > .inner span {font-size: 4.72vw;}
		.mainVisual > .inner span img {width: 81.25vw;}
		.mainVisual > .inner > div {letter-spacing:0.69vw}
		.mainVisual > .inner > div:nth-child(2) {margin-top:4.17vw;width: 61.5vw;letter-spacing:0.56vw}
		.mainVisual > .inner > div:nth-child(3) {width: 61.5vw}
		.mainVisual > .inner .blur {filter: blur(0.97vw)}
		.animate2.visible .blur {transition-delay:3.5s !important;transition: all 0.3s;filter:none}
		.mainVisual .scrollBox {bottom:4.17vw}
		.mainVisual .scrollBox a {width:3.75vw;height:9.31vw;padding-bottom:3.47vw;}
		.mainVisual .scrollBox a:before {width:2.50vw;height:1.25vw;bottom:0.97vw;}
		.mainVisual .scrollBox a:after {width:2.50vw;height:1.25vw;}

		.thumBox {padding-bottom:9.72vw}
		.thumBox > .inner {padding:13.89vw 0;}
		.thumBox > .inner .listBox li {flex: 1 0 calc(100% / 2);}
		.thumBox > .inner .listBox li a .txtBox em {font-size: 2.78vw;}
		.thumBox > .inner .listBox li:nth-child(n+3) {margin-top: 12.50vw;}
		.thumBox > .inner .listBox li a .txtBox span {font-size: 1.67vw;}
		.thumBox > .inner .moreBtn {bottom:-3.47vw;width:6.94vw;height:6.94vw}
		.thumBox > .inner .moreBtn:before {width:2.78vw;height:0.28vw;}
		.thumBox > .inner .moreBtn:after {width:0.28vw;height:2.78vw;}

		.bgBox .slideBox {background-position:top center !important}
		.bgBox .slideBox.first {background-image:url(../images/main/main_bg_m_1.jpg) !important}
		.bgBox .slideBox.second {background-image:url(../images/main/main_bg_m_2.jpg) !important}
		.bgBox .slideBox.third {background-image:url(../images/main/main_bg_m_3.jpg) !important}
		.bgBox .slideBox.fourth {background-image:url(../images/main/main_bg_m_4.jpg) !important}
		.bgBox .slideBox.fivth {background-image:url(../images/main/main_bg_m_5.jpg) !important}

}