@charset "UTF-8";
/* -------------------------------
	main visual
-------------------------------- */
#mainVisual {
  background-color: #fff;
}
#mainVisual .swiper-slide {
  height: 100vh;
}
@media print {
  #mainVisual .swiper-slide {
    height: 800px;
  }
}

/**/
.mainvbo-x_opening {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.mainvbo-x_opening #svg-logo {
  margin: 0 15%;
}

/**/
.mainvbo-x {
  width: 100%;
  height: 100%;
  padding-top: clamp(13px, 3.3333vw, 40px);
  padding-right: clamp(13px, 3.3333vw, 40px);
  padding-bottom: clamp(120px, 8vw, 160px);
  padding-left: clamp(13px, 3.3333vw, 40px);
  display: flex;
  background-color: #f1d7da;
  position: relative;
  z-index: 0;
}
.mainvbo-x .inner {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(32px, 8.33vw, 100px) 0 clamp(32px, 8.33vw, 100px) 0;
  background: url(../images/glid_pink.png);
  position: relative;
}

.mainvbo-x .inner p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  line-height: normal;
  text-align: center;
  margin: 0;
  padding: 0;
}
.mainvbo-x .inner p {
  /* color: #e8a4ac; */
  color: rgb(207, 112, 149);
  font-size: clamp(20px, 3vw, 36px);
}
.mainvbo-x .inner .main_txt {
  border-right: 2px solid transparent;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
.mainvbo-x .inner .main_txt_1_1 {
  width: 11em;
}
.mainvbo-x .inner .main_txt_1_2 {
  width: 15em;
}
.mainvbo-x .inner .main_txt_1_2_2 {
  width: 11em;
}
.mainvbo-x .inner .main_txt_1_3 {
  font-size: clamp(25px, 4vw, 48px);
  width: 8em;
  background: linear-gradient(
    to right,
    #f6b75e 0%,
    #e8a4ac 25%,
    #e8a4ac 56%,
    #d94d83 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mainvbo-x .logo {
  max-width: 326px;
  width: 326px;
  padding: 0 15px;
  margin: 0 auto;
}
.mainvbo-x .logo img {
  width: 100%;
}

/**/
.mainvbo-x-anime-1:before,
.mainvbo-x-anime-1:after {
  width: 0;
}
.mainvbo-x-anime-1 .inner .txt1,
.mainvbo-x-anime-1 .inner .txt2,
.mainvbo-x-anime-1 .inner .txt3 {
  transform: translate(50%, 0);
  opacity: 0;
  margin: 0;
}
.mainvbo-x-anime-1 .inner .txt1,
.mainvbo-x-anime-1 .inner .txt2 {
  margin-bottom: 1em;
}

.swiper-slide-active .mainvbo-x-anime-1:before,
.swiper-slide-active .mainvbo-x-anime-1:after {
  width: 50%;
  transition: width 1s ease 0.2s;
}
.swiper-slide-active .mainvbo-x-anime-1 .inner .txt1 {
  transform: translate(0, 0);
  opacity: 1;
  transition: transform 1s ease 0.2s, opacity 1s ease 0.2s;
}
.swiper-slide-active .mainvbo-x-anime-1 .inner .txt2 {
  transform: translate(0, 0);
  opacity: 1;
  transition: transform 1s ease 0.2s, opacity 1s ease 0.2s;
}
.swiper-slide-active .mainvbo-x-anime-1 .inner .txt3 {
  font-size: clamp(25px, 4vw, 48px);
  transform: translate(0, 0);
  opacity: 1;
  transition: transform 1s ease 0.2s, opacity 1s ease 0.2s;
}

.swiper-slide-prev .mainvbo-x-anime-1 {
  transform: translate(0, 0);
}
.swiper-slide-prev .mainvbo-x-anime-1:before,
.swiper-slide-prev .mainvbo-x-anime-1:after {
  width: 50%;
}
.swiper-slide-prev .mainvbo-x-anime-1 .inner .txt1 {
  transform: translate(-100%, 0);
  opacity: 0;
  transition: transform 2s ease 0s, opacity 1s ease 0s;
}
.swiper-slide-prev .mainvbo-x-anime-1 .inner .txt2 {
  transform: translate(-100%, 0);
  opacity: 0;
  transition: transform 2s ease 0.2s, opacity 1s ease 0.2s;
}
.swiper-slide-prev .mainvbo-x-anime-1 .inner .txt3 {
  font-size: clamp(25px, 4vw, 48px);
  transform: translate(-100%, 0);
  opacity: 0;
  transition: transform 2s ease 1.2s, opacity 1s ease 1.2s;
}

/* menu */
#mainNavi {
  font-size: calc(16px + 8 * (100vw - 992px) / 508);
  position: absolute;
  right: 0;
  top: 0;
  width: 15.416667em;
  height: 100%;
  display: none;
  border-left: solid 1px #e8a4ac;
}
@media print, screen and (min-width: 992px) {
  #mainNavi {
    display: flex;
    align-items: center;
  }
}
@media print, screen and (min-width: 1200px) {
  #mainNavi {
    font-size: 24px;
  }
}
#mainNavi > ul {
  font-family: "Work Sans", sans-serif;
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1.5;
  list-style: none;
  padding: 0;
  margin: 0;
}
#mainNavi > ul > li {
  padding-left: 1.33333em;
  position: relative;
}
#mainNavi > ul > li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-left: -3px;
  transform: translate(0, -50%);
  background-color: #bd537c;
}
#mainNavi > ul > li + li {
  margin-top: 1.83333em;
}
#mainNavi > ul > li > a {
  color: #191919;
  display: inline-block;
  position: relative;
}
#mainNavi > ul > li > a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  background-color: #191919;
  transition: transform 0.3s ease, visibility 0.3s ease;
  transform-origin: left bottom;
  visibility: hidden;
}
#mainNavi > ul > li > a:hover:after,
#mainNavi > ul > li.active > a:after {
  transform: scaleX(1);
  visibility: visible;
}

/* タイプライター風 */
.swiper-slide-active .main_txt_1_1,
.swiper-slide-prev .main_txt_1_1 {
  animation: key_main_txt1 1.65s steps(11) 1s 1 normal both,
    blinkTextCursor 500ms steps(11) infinite none;
}

.swiper-slide-active .main_txt_1_2,
.swiper-slide-prev .main_txt_1_2 {
  animation: key_main_txt2 2.25s steps(15) 1s 1 normal both,
    blinkTextCursor 500ms steps(15) infinite none;
}

.swiper-slide-active .main_txt_1_2_2,
.swiper-slide-prev .main_txt_1_2_2 {
  animation: key_main_txt2_2 1.65s steps(11) 3.25s 1 normal both,
    blinkTextCursor 500ms steps(11) 3.25s infinite none;
}

.swiper-slide-active .main_txt_1_3,
.swiper-slide-prev .main_txt_1_3 {
  animation: key_main_txt3 1.2s steps(8) 1s 1 normal both,
    blinkTextCursor 500ms steps(8) infinite none;
}

@keyframes key_main_txt1 {
  0% {
    width: 0;
  }
  100% {
    width: 11em;
  }
}
@keyframes key_main_txt2 {
  0% {
    width: 0;
  }
  100% {
    width: 15em;
  }
}
@keyframes key_main_txt2_2 {
  0% {
    width: 0;
  }
  100% {
    width: 11em;
  }
}
@keyframes key_main_txt3 {
  0% {
    width: 0;
  }
  100% {
    width: 8em;
  }
}
@keyframes blinkTextCursor {
  /*点滅するカーソルのアニメーション*/
  0% {
    border-right-color: transparent;
  }
  100% {
    border-right-color: transparent;
  }
}
/* ロゴ アニメーション */
#svg-logo path,
#svg-logo circle {
  fill: transparent;
}
#svg-logo .svg-elem-1 {
  transition: fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
}
#svg-logo .svg-elem-2 {
  transition: fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
}
#svg-logo .svg-elem-3 {
  transition: fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}
#svg-logo .svg-elem-4 {
  transition: fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
#svg-logo .svg-elem-5 {
  transition: fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}
#svg-logo .svg-elem-6 {
  transition: fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s;
}
#svg-logo .svg-elem-7 {
  transition: fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s;
}

.swiper-slide-active #svg-logo path,
.swiper-slide-active #svg-logo circle,
.swiper-slide-prev #svg-logo path,
.swiper-slide-prev #svg-logo circle {
  fill: #575757;
}

/* ラストアニメーション */
#mainVisual .logo {
  opacity: 0;
  transform: translate(0%, -50%);
}
#mainVisual .swiper-slide-active .logo {
  opacity: 1;
  transform: translate(0%, 0%);
  transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}
#mainVisual .scroll {
  opacity: 0;
  transform: translate(-50%, 20%);
}
#mainVisual .swiper-slide-active .scroll {
  opacity: 1;
  transition: opacity 1s ease 1s, transform 1s ease 1s;
  transform: translate(-50%, 0);
}
#mainVisual #mainNavi > ul > li {
  opacity: 0;
  transform: translate(0, -50%);
}
#mainVisual .swiper-slide-active #mainNavi > ul > li:nth-child(1) {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.5s ease 1.5s, transform 0.5s ease 1.5s;
}
#mainVisual .swiper-slide-active #mainNavi > ul > li:nth-child(2) {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.5s ease 1.75s, transform 0.5s ease 1.75s;
}
#mainVisual .swiper-slide-active #mainNavi > ul > li:nth-child(3) {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.5s ease 2s, transform 0.5s ease 2s;
}
#mainVisual .swiper-slide-active #mainNavi > ul > li:nth-child(4) {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.5s ease 2.25s, transform 0.5s ease 2.25s;
}
#mainVisual .swiper-slide-active #mainNavi > ul > li:nth-child(5) {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.5s ease 2.5s, transform 0.5s ease 2.5s;
}

/* 矢印アイコン */
#mainVisual .swiper-slide-active .scroll {
  opacity: 0;
}
#mainVisual .swiper-slide-active .scroll {
  opacity: 1;
  transition: opacity 0.5s ease 2.25s;
}

/**/
/* .scroll { position: absolute; bottom: clamp(23px, 6vw, 60px); left: 50%; transform: translateX(-50%); z-index: 4; }

.scroll::after { content: ''; position: absolute; top: 42%; left: 40%; display: block; width: 30px; height: 30px; background: url(../images/arrowDown.svg) top center no-repeat; background-size: contain; animation: arrowDown 2s infinite; z-index: 5; }

@keyframes arrowDown { 0% { top: 42%; }
  20% { top: 45%; }
  40% { top: 42%; }
  100% { top: 42%; } } */