@charset "UTF-8";
/* Scss Document */
.pc {
  display: block;
}
@media (max-width: 834px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media (max-width: 834px) {
  .sp {
    display: block;
  }
}

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #FF3C78;
  z-index: 9999999;
  text-align: center;
  color: #fff;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} /*
body{

    background:#FF3C78;遷
    &.appear{
        background:#fff;
    }画面を開いた後の背景色を指定
}*/
.splashbg {
  display: none;
  content: "";
  position: fixed;
  transform: scale(100);
  background-color: #FF3C78; /*伸びる背景色の設定*/
  z-index: 999;
  /*丸のスタートの形状*/
  top: calc(50% - 1rem); /*50%から円の半径を引いた値*/
  left: calc(50% - 1rem); /*50%から円の半径を引いた値*/
  width: 2rem;
  height: 2rem;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
  display: block;
  border-radius: 50%;
  -webkit-animation-name: PageAnime;
          animation-name: PageAnime;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes PageAnime {
  0% {
    transform: scale(100);
  }
  100% {
    transform: scale(0);
    display: none;
  }
}

@keyframes PageAnime {
  0% {
    transform: scale(100);
  }
  100% {
    transform: scale(0);
    display: none;
  }
}
/*
#container{
	opacity: 0;
}

body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}
*/
@-webkit-keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 402;
  transform: translateX(0%);
  transition: 0.6s cubic-bezier(0.85, 0, 0.15, 1);
  background-color: #FF3C78;
}
.loading.out {
  transform: translateX(100%);
}
.loading.out .loading__parts h1 img {
  opacity: 0 !important;
}

.loading__parts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
}
@media (max-width: 834px) {
  .loading__parts {
    width: 170px;
  }
}
.loading__parts h1 img {
  opacity: 0;
  width: 100%;
  transition: 0.3s all;
}

.loading.in .loading__parts h1 img {
  opacity: 1;
}

#header-mix #logo {
  visibility: hidden;
}

@-webkit-keyframes top-move2 {
  0% {
    transform: scale(0.8, 1.4) translate(0%, -100%);
  }
  10% {
    transform: scale(0.8, 1.4) translate(0%, -15%);
    opacity: 1;
  }
  20% {
    transform: scale(1.1, 0.7) translate(0%, 16%);
  }
  30% {
    transform: scale(0.9, 1.02) translate(0%, -10%);
  }
  40% {
    transform: scale(0.95, 1.08) translate(0%, -15%);
  }
  50% {
    transform: scale(0.95, 1.08) translate(0%, -10%);
  }
  60% {
    transform: scale(1.05, 0.9) translate(0%, 5%);
  }
  70% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  78% {
    transform: scale(0.98, 1.05) translate(0%, -4%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}

@keyframes top-move2 {
  0% {
    transform: scale(0.8, 1.4) translate(0%, -100%);
  }
  10% {
    transform: scale(0.8, 1.4) translate(0%, -15%);
    opacity: 1;
  }
  20% {
    transform: scale(1.1, 0.7) translate(0%, 16%);
  }
  30% {
    transform: scale(0.9, 1.02) translate(0%, -10%);
  }
  40% {
    transform: scale(0.95, 1.08) translate(0%, -15%);
  }
  50% {
    transform: scale(0.95, 1.08) translate(0%, -10%);
  }
  60% {
    transform: scale(1.05, 0.9) translate(0%, 5%);
  }
  70% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  78% {
    transform: scale(0.98, 1.05) translate(0%, -4%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
@-webkit-keyframes top-move3 {
  10% {
    /* 上から落ちてくる */
    transform: translateY(0);
    opacity: 1;
  }
  15% {
    /* 落ちてきた衝撃で縦に少しつぶれる */
    transform: scale(1.1, 0.98);
  }
  20% {
    /* 落ちてきた衝撃で縦にさらに少しつぶれる */
    transform: scale(1.1, 0.88);
  }
  30% {
    /* 縦につぶれながらもつぶれた反動で少し横に伸びる */
    transform: scale(1.1, 0.85);
  }
  45% {
    /* 縦につぶれた反動で横に伸びる */
    transform: scale(1.15, 0.8);
  }
  50% {
    /* つぶれた反動で一気に縦に伸びる */
    transform: scale(0.9, 1.05);
  }
  60% {
    /* 伸びた反動で縦につぶれる */
    transform: scale(1.1, 0.95);
  }
  70% {
    /* つぶれた反動で縦に少し伸びる */
    transform: scale(0.95, 1.03);
  }
  90% {
    /* 伸びた反動でほんの少し縦につぶれる */
    transform: scale(0.98, 1.02);
  }
  100% {
    /* 通常のサイズになる */
    transform: scale(1, 1);
    opacity: 1;
  }
}
@keyframes top-move3 {
  10% {
    /* 上から落ちてくる */
    transform: translateY(0);
    opacity: 1;
  }
  15% {
    /* 落ちてきた衝撃で縦に少しつぶれる */
    transform: scale(1.1, 0.98);
  }
  20% {
    /* 落ちてきた衝撃で縦にさらに少しつぶれる */
    transform: scale(1.1, 0.88);
  }
  30% {
    /* 縦につぶれながらもつぶれた反動で少し横に伸びる */
    transform: scale(1.1, 0.85);
  }
  45% {
    /* 縦につぶれた反動で横に伸びる */
    transform: scale(1.15, 0.8);
  }
  50% {
    /* つぶれた反動で一気に縦に伸びる */
    transform: scale(0.9, 1.05);
  }
  60% {
    /* 伸びた反動で縦につぶれる */
    transform: scale(1.1, 0.95);
  }
  70% {
    /* つぶれた反動で縦に少し伸びる */
    transform: scale(0.95, 1.03);
  }
  90% {
    /* 伸びた反動でほんの少し縦につぶれる */
    transform: scale(0.98, 1.02);
  }
  100% {
    /* 通常のサイズになる */
    transform: scale(1, 1);
    opacity: 1;
  }
}
@-webkit-keyframes poyon {
  0% {
    transform: scale(0.8, 1.4) translate(0%, -100%);
    opacity: 0;
  }
  10% {
    transform: scale(0.8, 1.4) translate(0%, -12%) skew(6deg, 0deg);
  }
  20% {
    transform: scale(1.2, 0.6) translate(0%, 20%);
  }
  30% {
    transform: scale(0.9, 1.1) translate(0%, -10%) skew(-6deg, 0deg);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -16%);
  }
  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%) skew(-3deg, 0deg);
  }
  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%) skew(0deg, 0deg);
  }
  70% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
@keyframes poyon {
  0% {
    transform: scale(0.8, 1.4) translate(0%, -100%);
    opacity: 0;
  }
  10% {
    transform: scale(0.8, 1.4) translate(0%, -12%) skew(6deg, 0deg);
  }
  20% {
    transform: scale(1.2, 0.6) translate(0%, 20%);
  }
  30% {
    transform: scale(0.9, 1.1) translate(0%, -10%) skew(-6deg, 0deg);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -16%);
  }
  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%) skew(-3deg, 0deg);
  }
  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%) skew(0deg, 0deg);
  }
  70% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
@-webkit-keyframes top-move {
  0% {
    transform: scale(1, 1) translate(0%, -50%);
    opacity: 0;
  }
  30% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }
  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  70% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
  }
  80% {
    transform: scale(1.05, 0.95) translate(0%, 3%);
  }
  90% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
@keyframes top-move {
  0% {
    transform: scale(1, 1) translate(0%, -50%);
    opacity: 0;
  }
  30% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }
  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  70% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
  }
  80% {
    transform: scale(1.05, 0.95) translate(0%, 3%);
  }
  90% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
@media (max-width: 834px) {
  #container {
    padding: 0;
  }
}

#main {
  width: 100%;
  height: calc(100vh - 160px);
  position: relative;
}
@media (max-width: 834px) {
  #main {
    height: 100vh;
  }
}
#main .main-box {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-width: 1000px;
  height: calc(100vh - 160px);
}
@media (max-width: 834px) {
  #main .main-box {
    max-width: 100%;
    min-width: 100%;
    height: 100vh;
  }
}
#main .main-box .main-inbox {
  position: absolute;
  z-index: 330;
  top: 43.5%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
}
#main .main-box .main-inbox.add {
  z-index: 300;
}
@media (max-width: 834px) {
  #main .main-box .main-inbox {
    width: 100%;
    top: 46%;
    padding: 0 15px;
  }
}
#main .main-box .main-inbox .fv-img {
  -webkit-animation: top-move2 1.8s ease-out 1s forwards;
          animation: top-move2 1.8s ease-out 1s forwards;
  transform-origin: center bottom;
  transform: translateY(-50%);
  opacity: 0;
  /*
  transition: 1.6s ease-in-out;
  opacity: 0;
  &.add {
      opacity: 1;
  }*/
}
@media (max-width: 834px) {
  #main .main-box .main-inbox .fv-img {
    width: 100%;
    max-width: 270px;
  }
}
#main .main-box .main-inbox .catch {
  color: #FFF;
  font-size: 26px;
  letter-spacing: 10px;
  display: block;
  margin: 0 auto 8px;
  line-height: 1.9em;
}
@media (max-width: 834px) {
  #main .main-box .main-inbox .catch {
    font-size: 18px;
    line-height: 2.2em;
    letter-spacing: 4px;
  }
}

.scrolldown1 {
  position: absolute;
  left: 50%;
  bottom: 0px;
  height: 80px;
  z-index: 25;
  transition: 1.6s ease-in-out;
  opacity: 0;
}
.scrolldown1.add {
  opacity: 1;
}
@media (max-width: 834px) {
  .scrolldown1 {
    height: 140px;
  }
}

.scrolldown1 span {
  position: absolute;
  left: -20px;
  top: -20px;
  color: #000;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.scrolldown1::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 0.1em solid #000;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  position: absolute;
  left: 50%;
  bottom: 35px;
  box-sizing: border-box;
}

@-webkit-keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}
@-webkit-keyframes barUp {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes barUp {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
.fv .swiper-slide-active .slide-img,
.fv .swiper-slide-duplicate-active .slide-img,
.fv .swiper-slide-prev .slide-img {
  -webkit-animation: zoomUp 12s linear 0s 1 normal both;
          animation: zoomUp 12s linear 0s 1 normal both;
}
.fv .swiper-slide-active span.bar,
.fv .swiper-slide-duplicate-active span.bar,
.fv .swiper-slide-prev span.bar {
  -webkit-animation: barUp 6s linear 0s 1 normal both;
          animation: barUp 6s linear 0s 1 normal both;
}
.fv .slide-img {
  display: block;
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.opt {
  position: absolute;
  bottom: 120px;
  left: 120px;
  opacity: 0;
}
@media (max-width: 834px) {
  .opt {
    left: 30px;
    width: calc(100% - 60px);
  }
}
.opt .number {
  width: 160px;
  border-bottom: solid 1px #FFF;
  margin: 0 35px 0 0;
}
@media (max-width: 834px) {
  .opt .number {
    width: 80px;
  }
}
.opt .number span {
  font-size: 13px;
  color: #FFF;
  display: block;
  padding: 0 0 20px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  letter-spacing: 1.4px;
}
@media (max-width: 834px) {
  .opt .number span {
    font-size: 11px;
  }
}
.opt .shop {
  width: 370px;
  border-bottom: solid 1px #FFF;
}
@media (max-width: 834px) {
  .opt .shop {
    width: calc(100% - 120px);
  }
}
.opt .shop span {
  font-size: 13px;
  color: #FFF;
  display: block;
  padding: 0 0 20px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  letter-spacing: 1.4px;
}
@media (max-width: 834px) {
  .opt .shop span {
    font-size: 11px;
  }
}

.swiper-slide-active .opt {
  -webkit-animation: vertical 0.6s cubic-bezier(0.85, 0, 0.15, 1) 0.3s 1 forwards;
          animation: vertical 0.6s cubic-bezier(0.85, 0, 0.15, 1) 0.3s 1 forwards;
}

.bar {
  display: block;
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  transform-origin: left center;
  background: #FFF;
  transform: scaleX(0);
  transition-timing-function: linear;
}
@media (max-width: 834px) {
  .bar {
    height: 5px;
  }
}

.slide-img.ver01 {
  background-image: url(../images/slide01.jpg) !important;
}
@media (max-width: 834px) {
  .slide-img.ver01 {
    background-image: url(../images/slide01.jpg) !important;
  }
}

.slide-img.ver02 {
  background-image: url(../images/slide02.jpg) !important;
}
@media (max-width: 834px) {
  .slide-img.ver02 {
    background-image: url(../images/slide02.jpg) !important;
  }
}

.slide-img.ver03 {
  background-image: url(../images/slide03.jpg) !important;
}
@media (max-width: 834px) {
  .slide-img.ver03 {
    background-image: url(../images/slide03.jpg) !important;
  }
}

.slide-img.ver04 {
  background-image: url(../images/slide04.jpg) !important;
}
@media (max-width: 834px) {
  .slide-img.ver04 {
    background-image: url(../images/slide04.jpg) !important;
  }
}

.slide-img.ver05 {
  background-image: url(../images/slide05.jpg) !important;
}
@media (max-width: 834px) {
  .slide-img.ver05 {
    background-image: url(../images/slide05.jpg) !important;
  }
}

.slide-img.ver06 {
  background-image: url(../images/slide06.jpg) !important;
}
@media (max-width: 834px) {
  .slide-img.ver06 {
    background-image: url(../images/slide06.jpg) !important;
  }
}

@-webkit-keyframes horizontal1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-40px);
  }
}

@keyframes horizontal1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-40px);
  }
}
@-webkit-keyframes horizontal2 {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes horizontal2 {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@-webkit-keyframes vertical {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes vertical {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
#top-cont {
  display: none;
}
@media (max-width: 834px) {
  #top-cont {
    display: block;
    padding: 0 0 100px;
  }
}/*# sourceMappingURL=custom.css.map */