@charset "UTF-8";

@keyframes SlideUp {
	0% {
	  opacity: 0;
	  transform: translateY(50%);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0);
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes borderLR {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

.c-invitationPage{
	color: #fff;
	background-color: #81d8d0;
}
.c-invitationSec--title {
	position: relative;
	padding-bottom: 6rem;
}
.title-triangle-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 85vw;
	height: 40vw;
	background-image: linear-gradient(155deg, #81d8d0,#81d8d0 50%, transparent 50%, transparent 100%);
	mix-blend-mode: multiply;
	animation: SlideUp 2s ease-in-out 5s 1 normal both;
}
.title-triangle-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 40vw;
	height: 40vw;
	background-image: linear-gradient(-135deg, #81d8d0,#81d8d0 50%, transparent 50%, transparent 100%);
	mix-blend-mode: multiply;
	animation: SlideUp 2s ease-in-out 6s 1 normal both;
}
.c-invitationSec--title__img01Wra_anime{
	width: 100%;
	max-width: 800px;
}
.c-invitationSec--title__img01Wrap {
	clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
}
.c-invitationSec--title__img01Wrap {
	position: relative;
	animation: fadeIn 2s ease-in-out 7s 1 normal both;
}
.title-line-top-left {
    position: absolute;
    top: 25%;
    left: 0;
    width: 127.5%;
    height: 1px;
    transform: rotate(38deg);
    transform-origin: 0 0;
}
.title-line-top-left::before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	border-bottom: 1px solid #fff;
	animation: borderLR 3s linear 8s 1 normal both;
}
.c-invitationSec--title__name {
    font-size: 1.9rem;
    font-family: "Petunia";
    margin-bottom: .5rem;
	color: #fff;
	animation: fadeIn 2s ease-in-out 9s 1 normal both;
}
.c-invitationSec--title__date{
	color: #fff;
	margin-bottom: 0;
	line-height: 1.3;
	font-size: 2.5rem;
	display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Gerbera";
	animation: fadeIn 2s ease-in-out 10s 1 normal both;
}
.c-invitationSec--title__date_days{
    font-size: 3rem;
}
.c-invitationSec--title__date_bor{
    font-family: font1;
    margin: 0 12px;
    font-size: 3.5rem;
}
.c-invitationSec--invTxt {
	position: relative;
}
.invTxt-line-bottom-left {
	position: absolute;
	bottom: 0;
    left: 0;
    width: 125%;
    height: 1px;
    transform: rotate(32deg);
    transform-origin: 0 0;
}
.invTxt-line-bottom-right {
	position: absolute;
    bottom: 12.5%;
    right: 0;
    width: 150%;
    height: 1px;
    transform: rotate(-48deg);
	transform-origin: 100% 0;
}
.invTxt-line-bottom-left.is-active::before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	border-bottom: 1px solid #fff;
	animation: borderLR 3s linear 1.5s 1 normal both;
}
.invTxt-line-bottom-right.is-active::before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	border-bottom: 1px solid #fff;
	animation: borderLR 3s linear 1.5s 1 normal both;
}
.c-invitationSec--scheTxt {
	background-color: transparent;
	padding: 4rem 0 6rem;
	margin: 0;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.scheTxt-line-bottom-left {
	position: absolute;
	bottom: 23%;
    left: 0;
	width: 31.25%;
	height: 1px;
	transform: rotate(50deg);
	transform-origin: 0 0;
}
.scheTxt-line-bottom-right {
    position: absolute;
    bottom: 28%;
    right: 0;
    width: 31.25%;
    height: 1px;
    transform: rotate(-60deg);
	transform-origin: 100% 0;
}
.scheTxt-line-bottom-left.is-active::before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	border-bottom: 1px solid #fff;
	animation: borderLR 3s linear 1.5s 1 normal both;
}
.scheTxt-line-bottom-right.is-active::before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	border-bottom: 1px solid #fff;
	animation: borderLR 3s linear 1.5s 1 normal both;
}
.c-invitationSec--invTxt__bottom,
.c-invitationSec--scheTxt__top,
.c-invitationSec--scheTxt__bottom {
	display: none;
}
.c-invitationSec--invTxt__top,
.c-invitationSec--scheTxt__ttl {
	width: 64%;
	max-width: 390px;
	margin: 0 auto;
	margin-bottom: 3rem;
}
.c-invitationSec--caption,
.c-invitationSec--replyBtn--preview {
	border-color: #fff;
}
.c-invitationSec--replyBtn--preview {
	color: #fff;
}
.c-buttonL,
.c-invitationSec--repForm .c-radioBtn,
.c-checkboxBtn {
    border-color: #4dada6;
	color: #4dada6;
	background-color: #fff;
}

.c-checkboxBtn.js-selected {
    border: 2px solid #4dada6;
}


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