@charset "UTF-8";
/* ------------------------------------
ローダー
 ------------------------------------ */
#loader-bg {
  background-color: #051D2C;
  height: 100vh;
  min-width: 1000px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000000;
  min-height: 700px;
}
#loader-bg .loader-bg_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: calc(100% - (100% - 100vw));
}
#loader-bg .loader-bg_inner .loader_logo {
  width: 27%;
}
#loader-bg #progress-bar {
  position: absolute;
  bottom: 0;
  height: 15px;
  background-color: #051D2C;
  z-index: 10;
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
}
#loader-bg #progress-bar2 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15px;
  background-color: white;
  z-index: 0;
}

.loader_ikokoti {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1930px;
  margin: 0 auto;
  z-index: 100;
  display: none;
}

@media screen and (max-width: 768px) {
  #loader-bg {
    background-color: #051D2C;
    height: 100vh;
    min-width: inherit;
    width: 100%;
  }
  .loader_ikokoti {
    position: absolute;
    bottom: -15px;
    left: 0;
    right: auto;
    width: 113px;
    max-width: 1930px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 480px) {
  .loader_ikokoti {
    width: 22%;
  }
  #loader-bg .loader-bg_inner .loader_logo {
    width: 33%;
  }
  #loader-bg {
    min-height: inherit;
  }
  #loader-bg #progress-bar {
    height: 7px;
  }
  #loader-bg #progress-bar2 {
    height: 7px;
  }
}
/* ------------------------------------
スライダー
 ------------------------------------ */
.slide-animation {
  -webkit-animation: fadezoom 13s 0s linear forwards;
          animation: fadezoom 13s 0s linear forwards;
}

@-webkit-keyframes fadezoom {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -ms-filter: blur(3px);
  }
  15% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    -ms-filter: blur(0px);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@keyframes fadezoom {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -ms-filter: blur(3px);
  }
  15% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    -ms-filter: blur(0px);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
/* ie用のアニメーション */
@-webkit-keyframes fadezoom2 {
  0% {
    -webkit-transform: scale(1.7);
            transform: scale(1.7);
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -ms-filter: blur(3px);
  }
  15% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    -ms-filter: blur(0px);
  }
  100% {
    -webkit-transform: scale(1.1) rotate(0.1deg);
            transform: scale(1.1) rotate(0.1deg);
    /* rotate(0.1deg)はがたつきを抑える */
  }
}
@keyframes fadezoom2 {
  0% {
    -webkit-transform: scale(1.7);
            transform: scale(1.7);
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -ms-filter: blur(3px);
  }
  15% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    -ms-filter: blur(0px);
  }
  100% {
    -webkit-transform: scale(1.1) rotate(0.1deg);
            transform: scale(1.1) rotate(0.1deg);
    /* rotate(0.1deg)はがたつきを抑える */
  }
}
/* ------------------------------------
タイトル横からスライド
 ------------------------------------ */
.rightIN-slide-js {
  -webkit-transform: translateX(25px);
          transform: translateX(25px);
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.rightIN-slide {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  opacity: 1;
}

.rightIN-slide-js2 {
  -webkit-transform: translateX(25px);
          transform: translateX(25px);
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.rightIN-slide2 {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  opacity: 1;
}

.leftIN-slide-js {
  -webkit-transform: translateX(-25px);
          transform: translateX(-25px);
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.leftIN-slide {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  opacity: 1;
}

/* ------------------------------------
小さい画像その場でフェード(スクロール)
------------------------------------ */
/* 順番でフェード */
.small-img-fade-js {
  opacity: 0;
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

.small-img-fade {
  opacity: 1;
}

/* 単発 */
.small-img-fadeOne-js {
  opacity: 0;
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

.small-img-fadeOne {
  opacity: 1;
}

/* 単発 遅い(酒の紹介の箇所)*/
.small-img-fadeOne-js2 {
  opacity: 0;
  -webkit-transition: 1.5s;
  transition: 1.5s;
}

.small-img-fadeOne2 {
  opacity: 1;
}

/* ------------------------------------
画像その場でフェード(ロード)
------------------------------------ */
.small-load-fadeOne-js {
  -webkit-animation-name: under-mv-fade;
          animation-name: under-mv-fade;
  -webkit-animation-duration: 1.6s;
          animation-duration: 1.6s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes under-mv-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes under-mv-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ------------------------------------
居心地最高横スライド
------------------------------------ */
.slide-js {
  -webkit-animation: slide 25s linear infinite;
          animation: slide 25s linear infinite;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
}

.slide-img1 {
  margin: 0 100px 0 0;
}

/* ------------------------------------
スクロールでビューっとスライドイン(共通)
------------------------------------ */
/* スクロールでスライドイン 右から*/
.under_slide_scroll-js1 {
  overflow: hidden;
  position: relative;
}
.under_slide_scroll-js1::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 100;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.under_slide_scroll-js1-in::before {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

/* スクロールでスライドイン 左から*/
.under_slide_scroll-js2 {
  overflow: hidden;
  position: relative;
}
.under_slide_scroll-js2::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 1000;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.under_slide_scroll-js2-in::before {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

/* スクロールでスライドイン 左から ベージュ*/
.under_slide_scroll-js3 {
  overflow: hidden;
  position: relative;
}
.under_slide_scroll-js3::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  background-color: #F3F2EE;
  z-index: 1000;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.under_slide_scroll-js3-in::before {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

/* ------------------------------------
下層ページ
------------------------------------ */
.under_wrap_fade-in {
  opacity: 1;
}

/* MVスライドイン */
.under_slide-js {
  overflow: hidden;
  position: relative;
}
.under_slide-js::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 100;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.under_slide-js-in::before {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

/* タイトルスライドイン */
/* リンクの箇所のホバー */
.common_linkOn {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #133f5a;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: block;
  -webkit-transform: scale(0);
          transform: scale(0);
}

/* MVタイトルsvgアニメーション */
.common_svg_path {
  stroke: #A8A597;
  stroke-width: 0px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  fill: transparent;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: textAnime;
          animation-name: textAnime;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes textAnime {
  0% {
    stroke-width: 0.5px;
    stroke-dashoffset: 1000;
    fill: transparent;
  }
  75% {
    fill: transparent;
  }
  80% {
    stroke-width: 0.5px;
    fill: transparent;
  }
  100% {
    stroke-width: 0px;
    stroke-dashoffset: 0;
    fill: #F3F2EE;
  }
}

@keyframes textAnime {
  0% {
    stroke-width: 0.5px;
    stroke-dashoffset: 1000;
    fill: transparent;
  }
  75% {
    fill: transparent;
  }
  80% {
    stroke-width: 0.5px;
    fill: transparent;
  }
  100% {
    stroke-width: 0px;
    stroke-dashoffset: 0;
    fill: #F3F2EE;
  }
}/*# sourceMappingURL=animation.css.map */