@charset "UTF-8";

@keyframes fadeOutBg {
    0%{
		background-color: rgb(234 213 211 / 0.6);
	}
	100%{
		background-color: rgb(234 213 211 / 0);
	}
}
@keyframes slideUp {
	0%{
		translate: 0 0;
	}
	100%{
		translate: 0 -48.5vw;
	}
}
@keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes wave {
    50% {
        rotate: -5deg;
    }
    100% {
        rotate: 5deg;
    }
}

.c-invitationSec--title {
    background-color: rgb(234 213 211 / 0.6);
    padding-block-start: 12rem;
    position: relative;
    z-index: 0;
    aspect-ratio: 1 / 1.81;
    animation-name: fadeOutBg;
    animation-delay: 3s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.c-invitationSec--title__ttl,
.c-invitationSec--title__ttl img {
    margin-inline: auto;
}
.c-invitationSec--title__ttl {
    position: absolute;
    inset-block-start: 31.5%;
    inset-inline: 0;
    z-index: 1;
    margin-inline: auto;
    margin-block-end: 0;
    animation-name: slideUp;
    animation-delay: 3s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.c-invitationSec--title__img01Wrap {
    z-index: 1;
}
.c-invitationSec--title__img01 {
    object-fit: cover;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}
.c-invitationSec__nameDateWrap {
    z-index: 1;
    margin-block-start: 2.25rem;
}
.c-invitationSec--title__name {
    margin-block-end: 0;
    font-family: "Gerbera";
    position: relative;
    font-size: 2.4rem;
    color: #c18167;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2.5s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}
.c-invitationSec--title__date {
    font-family: "Gerbera";
    font-size: 1.6rem;
    color: #c18167;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2.5s;
    animation-delay: 4.5s;
    animation-fill-mode: forwards;
}
.c-invitationSec--title__plantsWrap {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 2.5%;
    z-index: 0;
}
.c-invitationSec--title__plantsWrap::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -11%;
    height: 50%;
    background: linear-gradient(transparent 0, #fff 60%);
    z-index: 2;
}
div[class^="c-invitationSec--title__plant0"] {
    position: absolute;
    height: auto;
    animation-name: wave;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.c-invitationSec--title__plant01 {
    inset-block-end: 40%;
    inset-inline-start: 10%;
    width: 7%;
    transform-origin: bottom right;
    animation-duration: 4s;
}
.c-invitationSec--title__plant02 {
    inset-block-end: -10%;
    inset-inline-start: 25%;
    width: 20%;
    transform-origin: bottom center;
    animation-duration: 4s;
    animation-delay: 0.25s;
}
.c-invitationSec--title__plant03 {
    inset-block-end: 25%;
    inset-inline-start: 45%;
    width: 12%;
    transform-origin: bottom center;
    animation-duration: 4s;
    animation-delay: 0.5s;
}
.c-invitationSec--title__plant04 {
    inset-block-end: 26%;
    inset-inline-start: 65%;
    width: 18%;
    transform-origin: bottom left;
    animation-duration: 4s;
    animation-delay: 0.75s;
}
.c-invitationSec--title__plant05 {
    inset-block-end: 45%;
    inset-inline-start: 82%;
    width: 12%;
    transform-origin: bottom left;
    animation-duration: 4s;
    animation-delay: 1s;
}
.c-invitationSec--scheTxt {
	position: relative;
	background-color: transparent;
	padding-block: 6rem;
}
.c-invitationSec--scheTxt__top,
.c-invitationSec--scheTxt__bottom {
	display: none;
}
.c-invitationSec--img02 {
	margin-block-end: 0;
}
.c-invitationSec--invTxt {
    margin-top: 4rem;
}
.c-invitationSec--invTxt__top {
    display: none;
}
.c-invitationSec--scheTxt__ttl {
	width: min(60%,470px);
	margin-inline: auto;
	margin-block-end: 3rem;
}
.c-invitationSec--invTxt__top img,
.c-invitationSec--scheTxt__ttl img {
    margin-inline: auto;
}
.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;
}