@charset "UTF-8";

@keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes fadeOutBg {
	0%{
		background-color: rgba(255, 255, 255, .7);
	}
	100%{
		background-color: rgba(255, 255, 255, 0);
	}
}
.c-invitationPage{
	color: #231815;
	position: relative;
}
.c-invitationSec--opening__coverText {
	opacity: 0;
	animation: fadeIn 2s linear 2s 1 normal both;
}
.c-invitationSec--title {
	background: url("bgimage_top.jpg") no-repeat 50% 0;
	background-size: cover;
	padding-block-start: 0;
	aspect-ratio: 1/1.6;
}
.c-invitationSec--title__img01Wrap {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 17.5vh;
    margin-inline: auto;
	width: min(65.6vw, 525px);
}
.c-invitationSec--title__img01 {
	border-top-left-radius: 9999px;
	border-top-right-radius: 9999px;
	width: 100%;
	aspect-ratio: 1/1.31;
	object-fit: cover;
}
.c-invitationSec--title__name {
	font-family: "Gerbera";
	font-size: 1.8rem;
	margin-block-end: 0;
	margin-inline: auto;
	padding-inline: 0;
	line-height: 1.3;
	letter-spacing: 5px;
	width: min(90vw, 700px);
	position: absolute;
	inset-inline: 0;
	inset-block-end: 12.5%;
	span {
		white-space: nowrap;
	}
}
.c-invitationSec--title__date{
	font-family: "Gerbera";
	width: min(58vw, 360px);
	margin-inline: auto;
	margin-block-end: 0;
	padding-inline: 0;
	display: grid;
	grid-template-columns: 1fr 1.25fr 1fr;
	align-items: end;
	position: absolute;
	inset-inline: 0;
	inset-block-end: 6.5%;
}
.c-invitationSec--title__day {
	font-size: 2.8rem;
	line-height: 2rem;
}
.c-invitationSec--title__month,
.c-invitationSec--title__year {
	font-size: 1.6rem;
	line-height: 1.6rem;
}
.c-invitationSec--title__month {
	border-right: 1px solid currentColor;
}
.c-invitationSec--title__year {
	border-left: 1px solid currentColor;
}
.c-invitationSec--opening {
	background-color: rgba(255, 255, 255, .7);
	position: absolute;
	inset: 0;
	margin-inline: auto;
	width: min(100%, 800px);
	aspect-ratio: 1/1.6;
	animation-name: fadeOutBg;
	animation-duration: 3s;
	animation-delay: 3s;
	animation-fill-mode: both;
}
.c-invitationSec--opening__coverImgWrap {
	width: 71.5%;
	position: relative;
	z-index: 0;
	inset-inline: 0;
	inset-block-start: 6vh;
	margin-inline: auto;
}

#lottie2 {
	z-index: 1;
}
.c-invitationSec--opening__coverImgWrap2 {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 17.5vh;
	margin-inline: auto;
	width: min(65.6vw, 525px);
	aspect-ratio: 1/1.314;
	animation-name: fadeOut;
	animation-duration: 1.5s;
	animation-delay: 4s;
	animation-fill-mode: forwards;
}
.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-block-end: 0;
}
.c-invitationSec--invTxt__top,
.c-invitationSec--scheTxt__ttl {
	width: min(60%, 370px);
	margin-inline: auto;
	margin-block-end: 3rem;
}
.c-invitationSec--invTxt__bottom {
	display: none;
}
.c-invitationSec--replyBtn__btn {
	border-color: #000;
}
.c-invitationSec--replyBtn__btnWrap .c-buttonL {
    color: #000;
    border: 2px solid #000;
}

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