@charset "UTF-8";

@keyframes shrinkAndSlideUp {
  0% {
      transform: scale(1) translate(0,0);
  }
  100% {
      transform: scale(0.8) translate(0, -63vw);
  }
}
@keyframes anim_left {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}
@keyframes anim_right {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

.c-invitationPage,
.c-invitationSec--scheTxt {
  color: #222;
}
.c-invitationSec--title {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.45;
  background-color:#ead2cc;
}
.c-invitationSec--title::before {
  content: "";
  width: 60vw;
  aspect-ratio: 1;
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: -.6rem;
  mix-blend-mode: multiply;
  background: url("leaf_r.jpg") no-repeat 50% 50% / contain;
  opacity: 0.5;
  transform-origin: 100% 0;
  animation-name: anim_right;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.c-invitationSec--title__ttl {
  position: absolute;
  inset-block-start: 38%;
  inset-inline: 0;
  width: 72.3%;
  max-width: 575px;
  margin-block-end: 0;
  margin-inline: auto;
  animation-name: shrinkAndSlideUp;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
#lottie {
  width: min(92%, 533px);
  margin-inline: auto;
}
.c-invitationSec--title__ttlImg,
.c-invitationSec--title__capImg {
  margin-inline: auto;
  height: auto;
}
.c-invitationSec--title__ttlImg {
  margin-block-start: 0;
}
.c-invitationSec--title__capImg {
  margin-block-start: 1rem;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 1.8s;
  animation-fill-mode: forwards;
}
.c-invitationSec--title__img01Wrap {
  width: min(66.7%, 535px);
  aspect-ratio: 1;
  margin-block-start: 40%;
  margin-inline: auto;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}
.c-invitationSec--title__img01 {
  border-radius: calc(1px / 0);
  object-fit: cover;
}
.c-invitationSec--title__name {
  font-size: 3.2rem;
  font-family: "Faius";
  line-height: 1;
  margin-block: 1.5rem 0;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
.c-invitationSec--title__date {
  font-size: 2.2rem;
  font-family: "Lupine";
  position: relative;
  margin-block-end: 0;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 3.5s;
  animation-fill-mode: forwards;
}

.c-invitationSec--invTxt {
  padding-block-start: 4rem;
  padding-inline: 2rem;
  position: relative;
  overflow: hidden;
}
.c-invitationSec--invTxt::before {
  content: "";
  width: 60vw;
  aspect-ratio: 1;
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: -.6rem;
  background: url("leaf_l.jpg") no-repeat 50% 50% / contain;
  opacity: 0.35;
  transform-origin: 0 0;
  animation-name: anim_left;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.c-invitationSec--scheTxt {
	position: relative;
	background-color: transparent;
  margin-inline: 0;
	padding-block: 6rem;
}
.c-invitationSec--scheTxt__top,
.c-invitationSec--scheTxt__bottom {
	display: none;
}
.c-invitationSec--img02 {
	margin-block-end: 0;
}
.c-invitationSec--invTxt__top,
.c-invitationSec--scheTxt__ttl {
	margin-inline: auto;
}
.c-invitationSec--invTxt__top {
  width: min(45%, 320px);
  margin-block-end: 1.5rem;
}
.c-invitationSec--scheTxt__ttl {
	width: min(65%, 470px);
  margin-block-end: 0;
}
.c-invitationSec--invTxt__top img,
.c-invitationSec--scheTxt__ttl img {
  margin-inline: auto;
}
.c-invitationSec--invTxt__middle {
  margin-inline: 0;
}
.c-invitationSec--invTxt__bottom {
	display: none;
}
.c-invitationSec--replyBtn__btnWrap {
  position: relative;
  border: 2px solid #b7975e;
  border-radius: calc(1px / 0);
}
.c-invitationSec--replyBtn__btnWrap .c-buttonL {
  color: #b7975e;
}
.c-invitationPage--reply {
  /* position: relative; */
  background-color:#ead2cc;
}
/* .c-invitationPage--reply::before {
  content: "";
  width: 60vw;
  aspect-ratio: 1;
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: -.6rem;
  mix-blend-mode: multiply;
  background: url("leaf_r.jpg") no-repeat 50% 50% / contain;
  opacity: 0.5;
} */

/* プロフィール */
.c-invitationSec--profile__deco {
	width: 26%;
}