@charset "UTF-8";

img {
    height: auto;
}
/* DPポップアップ */
.dp-popupCont__silver,
.dp-popupCont__rank-silver{
	background-color: #F2F2F2;
}
.dp-popupCont__gold,
.dp-popupCont__rank-gold{
	background-color: #FFFBEF;
}
.dp-popupCont__platinum,
.dp-popupCont__rank-platinum {
	background-color: #E7EBF1;
}
.dp-popupCont__card {
	margin-top: -3rem;
}
.dp-popupCont__txt {
	background-color: #FFF7EC;
}
.dp-popupCont__rankTtl {
	font-size: 18px;
	position: relative;
	filter: drop-shadow(0 3px 6px rgba(0,0,0,.15));
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.dp-popupCont__rankTtl:after {
	--size: 20px;
	content: "";
	width: 0;
	height: 0;
	border-top: var(--size) solid #fff;
	border-left: var(--size) solid transparent;
	border-right: var(--size) solid transparent;
	position: absolute;
	left: var(--size);
	bottom: -20px;
}

/* 点滅アニメーション */
.anim-flash{
	animation: flash 1s ease-in-out infinite alternate;
}
@keyframes anim-flash{
	0%{ opacity: 100%; }
	50%{ opacity: 0%; }
	100%{ opacity: 100%; }
}
/* 文字詰め */
.font_kerning {
    font-feature-settings: "palt";
}

/* 結婚報告はがき */
.postcard {
	color: #5A4A37;
	margin-inline: auto;
}
.postcard_clr_or01 {
    color: #FF6F00;
}
.postcard_clr_br01 {
    color: #5A4A37;
}
.postcard_bgClr_gr {
    background-color: #F9F8F3;
}
.postcard_bgClr_be {
    background-color: #F5ECDE;
}
.postcard_marker {
    background-image: linear-gradient(transparent 25%, #FFF89C 25%);
}
.bg_postcard {
    background: url(https://image.piary.jp/uploads/paper/postcard/bg_postcard.jpg) no-repeat 50% 50%;
    background-size: cover;
}
.bg_postcard02 {
    background: url(https://image.piary.jp/uploads/paper/postcard/bg_postcard02.jpg) no-repeat 50% 0%;
    background-size: cover;
}
.postcard_mv {
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    z-index: 0;
}
.postcard_mv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(75,40,0,.45); */
    background-color: rgba(0,0,0,.2);
}
.postcard_mv__title {
    z-index: 1;
}
.postcard_btn {
    width: fit-content;
    padding-inline: 3.5rem;
}
.postcard_ttl01 {
    font-weight: bold;
    line-height: 1.4;
    position: relative;
    font-feature-settings: "palt" 1;
    letter-spacing: 2px;
    padding-top: 36px;
}
.postcard_ttl01::before {
    content: "";
    width: 100%;
    height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.postcard_ttl01--design::before {
    background-image: url(//image.piary.jp/uploads/postcard/txt_design.svg);
    background-repeat: no-repeat;
    background-size: auto 20px;
}
.postcard_ttl01--color::before {
    background-image: url(//image.piary.jp/uploads/postcard/txt_color.svg);
    background-repeat: no-repeat;
    background-size: auto 20px;
}
.postcard_ttl01--stamp::before {
    background-image: url(//image.piary.jp/uploads/postcard/txt_stamp.svg);
    background-repeat: no-repeat;
    background-size: auto 20px;
}
.postcard_line {
    display: flex;
    gap: 25px;
    align-items: center;
}
.postcard_line::after {
    content: "";
    width: auto;
    height: 1px;
    background-color: currentColor;
    flex-grow: 1;
}
.bg_stamp {
    background:url(https://image.piary.jp/uploads/postcard/bg_stamp.webp) repeat-x;
}
.bg_stamp img {
    position: relative;
}
.postcard_howto {
	background-color: #F9F8F3;
  }
.postcard_howto__item {
	background-color: #fff;
	box-shadow: 0px 3px 6px rgba(0,0,0,.15);
	position: relative;
}
.postcard_howto__item::before {
    --size: 60px;
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 0;
    height: 0;
    border-top: var(--size) solid #F9F8F3;
    border-right: var(--size) solid transparent;
}
.postcard_howto__ttl {
    position: relative;
    color: #FF6F00;
}
.postcard_howto__ttl::before {
    --size : 40px;
    content: "";
    position: absolute;
    width: var(--size);
    height: var(--size);
    top: -3rem;
    left: -2rem;
}
.postcard_howto__ttl--01::before {
    background: url(https://image.piary.jp/uploads/paper/postcard/ico_01.svg) no-repeat 50% 50%;
    background-size: contain;
}
.postcard_howto__ttl--02::before {
    background: url(https://image.piary.jp/uploads/paper/postcard/ico_02.svg) no-repeat 50% 50%;
    background-size: contain;
}
.postcard_howto__ttl--03::before {
    background: url(https://image.piary.jp/uploads/paper/postcard/ico_03.svg) no-repeat 50% 50%;
    background-size: contain;
}
.postcard_howto__ttl--04::before {
    background: url(https://image.piary.jp/uploads/paper/postcard/ico_04.svg) no-repeat 50% 50%;
    background-size: contain;
}
.postcard_lineup__item img {
    border: 1px solid #aaa;
}

.postcard_date {
    width: fit-content;
    margin-inline: auto;
    padding: 0.5rem 1.5rem;
    color: #f00;
    border: 1px solid currentColor;
}
.postcard_designTtl {
    position: relative;
    width: fit-content;
    margin-inline: auto;
}
.postcard_icNew::before {
    content:'New';
    text-transform: uppercase;
    position: absolute;
    background-color: #ea5b18;
    color: #fff;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: flash;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes flash {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* はがきデザイン一覧 index */
.postcard_index__list {
    margin-inline: auto;
    margin-block-start: 2rem;
    column-gap: 1rem;
}
.postcard_index__link {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-block: 1.5rem 3rem;
    border: 1px solid #ccc;
    border-radius: 1rem;
    position: relative;
}
.postcard_index__link::after {
    content:"";
    width: 1rem;
    aspect-ratio: 1;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    rotate: 45deg;
    position: absolute;
    inset-block-end: 1rem;
    inset-inline: 0;
    margin-inline: auto;
}
.postcard_index__icWrap {
    display: grid;
    place-content: center;
    width: 10rem;
    aspect-ratio: 1;
}
.postcard_index__name {
    flex-grow: 1;
    height: 1.2;
}