@charset "UTF-8";

@keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes anim_rotate1 {
    50% {
        rotate: -15deg;
    }
    100% {
        rotate: 0deg;
    }
}
@keyframes anim_rotate2 {
    50% {
        rotate: -15deg;
    }
    100% {
        rotate: -30deg;
    }
}
@keyframes anim_rotate3 {
	0%, 100% {
        rotate: 25deg;
    }
    50% {
        rotate: 20deg;
    }
}
@keyframes anim_rotate4 {
    0%, 100% {
        rotate: -40deg;
    }
	50% {
        rotate: -35deg;
    }
}
.c-invitationPage{
	color: #604c3f;
	position: relative;
}
.c-invitationSec--title {
	background: url("bgimage_top.jpg") no-repeat 50% 0 / cover;
	aspect-ratio: 1 / 1.513;
	overflow: hidden;
}
.c-invitationSec--title__coverImgWrap {
	background: url("cover2.jpg") no-repeat 50% 0 / cover;
	position: absolute;
	inset: 0;
	aspect-ratio: 1 / 1.513;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 1.5s;
	animation-delay: 2.5s;
	animation-fill-mode: forwards;
}
.c-invitationSec--title__ttl {
	margin-block-start: 5rem;
}
.c-invitationSec--title__ttl#lottie {
	width: min(62.667%, 50.1rem);
}
.c-invitationSec--title__ttl#lottie2 {
	width: min(52%, 41.6rem);
}
.c-invitationSec--title__img01Wrap {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 28.6%;
    margin-inline: auto;
	width: min(66.667%, 53.3rem);
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-delay: 4.5s;
	animation-fill-mode: forwards;
}
.c-invitationSec--title__img01 {
	border-top-left-radius: 9999px;
	border-top-right-radius: 9999px;
	width: 100%;
	aspect-ratio: 10 / 11;
	object-fit: cover;
}
.c-invitationSec--title__name {
	font-family: "Gerbera_i2";
	font-size: 1.8rem;
	margin-block-end: 0;
	margin-inline: auto;
	padding-inline: 0;
	line-height: 1.3;
	width: min(90%, 70rem);
	position: absolute;
	inset-inline: 0;
	inset-block-end: 15%;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-delay: 5s;
	animation-fill-mode: forwards;
}
.c-invitationSec--title__date {
	font-family: "Lupine";
	width: min(58%, 36rem);
	margin-inline: auto;
	margin-block-end: 0;
	padding-inline: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: end;
	position: absolute;
	inset-inline: 0;
	inset-block-end: 11%;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-delay: 6s;
	animation-fill-mode: forwards;
}
.c-invitationSec--title__day,
.c-invitationSec--title__year {
	font-size: 2.8rem;
	line-height: 1.6rem;
}
.c-invitationSec--title__month {
	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: #fdf8cb url("cover1.jpg") no-repeat 50% 0 / cover;
	position: absolute;
	inset: 0;
	margin-inline: auto;
	width: 100%;
	aspect-ratio: 1 / 1.513;
	overflow: hidden;
	animation-name: fadeOut;
	animation-duration: 1.5s;
	animation-delay: 2s;
	animation-fill-mode: both;
}
.c-invitationSec--title__flowers3_top {
	position: absolute;
	width: 40%;
	inset-block-start: -5%;
	inset-inline-start: -10%;
	transform-origin: 50% 0%;
	opacity: 0;
	animation-name: fadeIn, anim_rotate1;
	animation-duration: 3s, 8s;
	animation-delay: 5s, 0s;
  	animation-iteration-count: 1, infinite;
	animation-fill-mode: both;
	animation-direction: normal, alternate;
}
.c-invitationSec--title__flowers3_bottom {
	position: absolute;
	width: 40%;
	inset-block-end: -6%;
	inset-inline-end: -20%;
	transform-origin: 60% 100%;
	opacity: 0;
	animation-name: fadeIn, anim_rotate1;
	animation-duration: 3s, 8s;
	animation-delay: 5s, 0s;
  	animation-iteration-count: 1, infinite;
	animation-fill-mode: both;
	animation-direction: normal, alternate;
}
.c-invitationSec--opening__flowers1_top {
	position: absolute;
	width: 12%;
	inset-block-start: -6%;
	inset-inline-start: -6%;
	transform-origin: 0 0%;
	rotate: -30deg;
	animation-name: anim_rotate2;
	animation-duration: 5s;
    animation-iteration-count: infinite;
	animation-fill-mode: both;
    animation-direction: alternate;
}
.c-invitationSec--opening__flowers1_bottom {
	position: absolute;
	width: 20%;
	inset-block-end: -2.5%;
	inset-inline-start: -10%;
	transform-origin: 50% 100%;
	rotate: 30deg;
	animation-name: anim_rotate3;
	animation-duration: 5s;
    animation-iteration-count: infinite;
	animation-fill-mode: both;
    animation-direction: alternate;
}
.c-invitationSec--opening__flowers2_top {
	position: absolute;
	width: 21.125%;
	inset-block-start: -5%;
	inset-inline-end: -10%;
	transform-origin: 50% 0;
	rotate: 30deg;
	animation-name: anim_rotate3;
	animation-duration: 5s;
    animation-iteration-count: infinite;
	animation-fill-mode: both;
    animation-direction: alternate;
}
.c-invitationSec--opening__flowers2_bottom {
	position: absolute;
	width: 25%;
	inset-block-end: 12.5%;
	inset-inline-end: -17%;
	transform-origin: 50% 100%;
	rotate: -45deg;
	animation-name: anim_rotate4;
	animation-duration: 5s;
    animation-iteration-count: infinite;
	animation-fill-mode: both;
    animation-direction: alternate;
}
.c-invitationSec--invTxt {
	padding: 8rem 0 3rem;
	position: relative;
}
.c-invitationSec--scheTxt {
	position: relative;
	background-color: transparent;
	padding: 6rem 0;
}
.c-invitationSec--scheTxt__top,
.c-invitationSec--scheTxt__bottom{
	display: none;
}
.is-active.c-invitationSec--invTxt__top::after {
	content: "";
	position: absolute;
	inset-block-start: -110%;
	inset-inline: 0;
	width: 45%;
	aspect-ratio: 1 / 0.914;
	margin-inline: 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__top {
	width: min(36.4%, 29.1rem);
	margin-inline: auto;
	margin-block-end: 3rem;
}
.c-invitationSec--scheTxt__ttl {
	width: min(53.33%, 42.66rem);
	margin-inline: auto;
	margin-block-end: 3rem;
}
.c-invitationSec--invTxt__bottom {
	display: none;
}
.c-invitationSec--img02{
	margin-block-end: 0;
}
.c-invitationSec--replyBtn__btn {
	border-color: #000;
}
.c-invitationSec--replyBtn__btnWrap .c-buttonL {
    color: #000;
    border: 2px solid #000;
}

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