@charset "UTF-8";

@keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes slideUp {
	0%{
		translate: 0 0;
	}
	100%{
		translate: 0 -40vw;
	}
}
@keyframes slideDown {
	0%{
		translate: 0 0;
	}
	100%{
		translate: 0 30vw;
	}
}

.c-invitationPage{
	color: #231815;
	position: relative;
	background-color: #fffceb;
}
.c-invitationSec--title {
	position: relative;
	aspect-ratio: 1/1.51;
	z-index: 0;
	background: url("bgimage_top.jpg") no-repeat 50% 0 / contain;
}
.c-invitationSec--title__ttl {
	position: absolute;
	width: min(38.666%, 31rem);
    inset-block-start: 35%;
    inset-inline: 0;
	margin-block-end: 0;
	z-index: 1;
	animation-name: slideUp;
	animation-duration: 1.5s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
}
.c-invitationSec--title__img01Wrap {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 29.5%;
	width: min(74.6%, 59.7rem);
	aspect-ratio: 1 / 0.866;
	margin-inline: auto;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-delay: 3.5s;
	animation-fill-mode: forwards;
	z-index: 1;
}
.c-invitationSec--title__img01 {
	aspect-ratio: 1 / 0.866;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.c-invitationSec--title__frame {
	position: absolute;
	width: 100%;
	aspect-ratio: 1 / 0.866;
	inset-block-start: 0;
	inset-inline-start: 0;
	background: url("frame.png") no-repeat 50% 50% / contain;
	rotate: 8deg;
}
.c-invitationSec--title__caption {
	position: absolute;
	inset-block-end: 35.5%;
	inset-inline: 0;
	width: min(60%, 43.7rem);
	margin-inline: auto;
	animation-name: slideDown;
	animation-duration: 1.5s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
}
.c-invitationSec--title__captionImg {
	height: auto;
}
.c-invitationSec--title__name {
	color: #664819;
	font-family: "Petunia";
	font-size: 2rem;
	line-height: 1.3;
	margin-block-end: 0;
	margin-inline: auto;
	padding-inline: 0;
	width: min(90vw, 70rem);
	position: absolute;
	inset-inline: 0;
	inset-block-end: 10%;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-delay: 4s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.c-invitationSec--title__name span {
	white-space: nowrap;
}
.c-invitationSec--title__date {
	color: #664819;
	font-family: "Gerbera";
	font-size: 1.6rem;
	line-height: 1;
	width: min(50vw, 36rem);
	margin-inline: auto;
	margin-block-end: 0;
	padding-inline: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	position: absolute;
	inset-inline: 0;
	inset-block-end: 4%;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-delay: 4.5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.c-invitationSec--title__month {
	border-right: 1px solid;
}
.c-invitationSec--title__year {
	border-left: 1px solid;
}
.c-invitationSec--title__day {
	font-size: 2.4rem;
}
.c-invitationSec--invTxt {
	padding-block-start: 5rem;
	background: url("bg_body1.png") no-repeat 100% 100% / contain;
}
.c-invitationSec--scheTxt {
	background-color: transparent;
	margin-inline: 0;
	padding-block-start: 5rem;
	background: url("bg_body2.png") no-repeat 100% 100% / contain;
}
.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;
	margin-block-end: 3rem;
	z-index: 0;
}
.c-invitationSec--invTxt__top {
	width: min(32.4%, 26rem);
}
.c-invitationSec--scheTxt__ttl {
	width: min(44.8%, 35rem);
}
.is-active.c-invitationSec--invTxt__top::after,
.is-active.c-invitationSec--scheTxt__ttl::after {
	content: "";
	position: absolute;
	inset: -40% 0;
	margin: auto;
	background: url("bg_title.png") no-repeat 50% 50% / contain;
	z-index: -1;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.c-invitationSec--invTxt__bottom {
	display: none;
}
.c-invitationSec--replyBtn__btn {
	border-color: #231815;
}
.c-invitationSec--replyBtn__btnWrap .c-buttonL {
    color: #231815;
    border: 2px solid;
}

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