@charset "UTF-8";

@keyframes image-fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes image-fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes bg-fadeOut {
	0%{
		background-color: var(--_primary-color);
	}
	100%{
		background-color: transparent;
	}
}
@keyframes image-moveUp {
	0%{
		transform: translateY(90%);
	}
	100%{
		transform: translateY(0%);
	}
}
@keyframes border-anim {
	0%{
		width: 0%;
	}
	100%{
		width: 26.667vi;
	}
}

.c-invitationPage {
	--_primary-color: #c38586;
	background-color: #f4eded;
}

.c-invitationSec--title {
	background-color: #fff;
	position: relative;
	padding-block-start: 110px;
	z-index: 0;
}
.c-invitationSec--title__cover {
	position: absolute;
	inset: 0;
	background-color: var(--_primary-color);
	animation-name: bg-fadeOut;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	z-index: 3;
}
.c-invitationSec--title__ttl01 {
	width: 48%;
	max-width: revert;
    position: absolute;
    inset-block-start: 5.5%;
    inset-inline: 4%;
	animation-name: image-moveUp;
	animation-duration: 2s;
	animation-delay: 2.5s;
	animation-fill-mode: both;
}
#lottie {
	width: 85%;
	margin-inline: auto;
}
.c-invitationSec--title__ttl02 {
	position: absolute;
	width: 37%;
	inset-block-start: 9%;
	inset-inline-end: 6%;
	animation-name: image-fadeIn;
	animation-duration: 1s;
	animation-delay: 3.5s;
	animation-fill-mode: both;
}
.c-invitationSec--title__img01Wrap {
	position: relative;
    margin-inline-start: auto;
    width: 84%;
	aspect-ratio: 2 / 3;
    z-index: 0;
	animation: image-fadeIn 1.5s ease-in-out 3s both;
}
.c-invitationSec--title__img01Wrap::after {
	position: absolute;
	content: "";
	background-color: rgba(255 255 255 / 0.4);
	inset: 0;
	z-index: 1;
}
.c-invitationSec--title__img01 {
	aspect-ratio: inherit;
	object-fit: cover;
}
.c-invitationSec--title__name{
	font-family: "Daisy";
	font-size: 2rem;
	letter-spacing: 3px;
	margin-block-end: 0;
	padding-inline: 0;
	line-height: 1.3;
	position: absolute;
	inset-block-end: 30%;
	inset-inline-start: 8%;
	z-index: 2;
	text-align: left;
	animation: image-fadeIn 1.5s ease-in-out 3s both;
}
.c-invitationSec--title__date{
	font-family: "Daisy";
	font-size: 1.8rem;
	margin-block-end: 0;
	padding-inline: 0;
	position: absolute;
	inset-block-end: 23%;
	inset-inline-start: 8%;
	z-index: 2;
	text-align: left;
	animation: image-fadeIn 1.5s ease-in-out 3s both;
}
.c-invitationSec--title__caption {
    z-index: 5;
    width: min(49%, 416px);
    position: absolute;
    inset-block-end: 10%;
    inset-inline-start: 8%;
	animation: image-fadeIn 1.5s ease-in-out 3s both;
}

.c-invitationSec--invTxt {
	padding: 6rem 0 3rem;
	position: relative;
	z-index: 0;
}
.c-invitationSec--invTxt__top,
.c-invitationSec--invTxt__middle,
.c-invitationSec--invTxt__bottom{
	z-index: 2;
}
.c-invitationSec--scheTxt {
	position: relative;
	background-color: transparent;
	padding: 6rem 0;
}
.c-invitationSec--scheTxt__top,
.c-invitationSec--scheTxt__bottom{
	display: none;
}
.c-invitationSec--img02{
	margin-bottom: 0;
}
.c-invitationSec--invTxt__top,
.c-invitationSec--scheTxt__ttl {
	font-size: 0;
	margin-inline: auto;
	padding-block-end: 3rem;
	margin-block-end: 3rem;
	position: relative;
}
.c-invitationSec--invTxt__top {
	width: 50%;
	max-width: 398px;
}
.c-invitationSec--scheTxt__ttl {
	width: 76%;
	max-width: 610px;
}
.is-active.c-invitationSec--invTxt__top::after,
.is-active.c-invitationSec--scheTxt__ttl::after {
	content: "";
	position: absolute;
	border-block-end: 2px solid var(--_primary-color);
	inset-block-end: 0;
	inset-inline-start: 10%;
	width: 0;
	animation-name: border-anim;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
.is-active.c-invitationSec--invTxt__top::after {
	inset-inline-start: 23.4%;
}
.is-active.c-invitationSec--scheTxt__ttl::after {
	inset-inline-start: 30.3%;
}
.c-invitationSec--invTxt__bottom {
	display: none;
}


/* プロフィール */
.c-invitationSec--profile__ttl {
     width: 37.5%;
}
.c-invitationSec--profile__deco {
	width: 26%;
	margin-block-start: 1.5rem;
	border-block-start: 1px solid var(--_primary-color);
}
.c-invitationSec--profile__role {
    font-family: "Daisy";
	color: var(--_primary-color);
	text-transform: uppercase;
	letter-spacing: 4px;
}
.c-invitationSec--profile__deco img {
	display: none;
}

.c-invitationSec--replyBtn__btnWrap .c-buttonL {
    color: var(--_primary-color);
    border: 2px solid var(--_primary-color);
}