@charset "utf-8";
/* ====================================================================

	style
	
==================================================================== */
/*  common
-------------------------------------------------------------------- */
nav.cta {
	gap: var(--m2);
}
nav.cta > a {
	height: calc(52 * var(--px));
}

nav.cta > a img {
	max-height: 100%;
}
.nav-tel, .nav-contact {
	padding: 0;
	background: transparent;
}
@media screen and (min-width: 768px) {
	.nav-contact {
		width: calc(240 * var(--px));
	}
}
@media screen and (max-width: 767px) {}

/*  header
-------------------------------------------------------------------- */
header nav.cta {
	margin-top: var(--m);
	width: fit-content;
	margin-left: auto;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	header.fixed {
		top: auto;
		bottom: 0;
	}
	header nav.cta {
		gap: var(--m);
	}
}


/*  main
-------------------------------------------------------------------- */
main.content {}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	main.content {
		overflow-x: clip;
	}
}



/*  section
-------------------------------------------------------------------- */
section#billboard {
	background: url('imgs/bg-image-main-color.webp');
	position: relative;
	z-index: 1;
}
section#billboard .wrap {
	position: relative;
}
section#billboard .lead {
	color: var(--main-bg-color);
	line-height: 2.5;
}
section#billboard .lead span {
	padding-block: 0.1lh;
	padding-inline: 0.75ic;
	border-radius: 5px 5px 20px 5px;
	background: white;
	font-weight: 400;
	letter-spacing: 0.1ic;
}
section#billboard .wrap :is(.tagline, .lead, img) {
	position: absolute;
}
@media screen and (min-width: 768px) {
	section#billboard .wrap {
		height: calc(800 * min((100vw / var(--mw)), 1px));
	}
	section#billboard .tagline {
		width: calc(620 / var(--per));
		left: 0;
		top: calc(184 / 760 * 100%);
		z-index: 10;
	}
	section#billboard .lead {
		font-size: 23px;
		left: calc(352 / var(--per));
		top: calc(500 / 760 * 100%);
		z-index: 10;
	}
	section#billboard .lead span {
		box-shadow: 5px 5px 5px 0 rgb( 0 0 0 / 0.1);
	}
	section#billboard .sticky {
		width: calc(210 / var(--per));
		left: calc(92 / var(--per));
		top: calc(490 / 760 * 100%);
		z-index: 11;
	}
	section#billboard .image01 {
		width: calc(670 / var(--per));
		left: calc(496 / var(--per));
		top: calc(114 / 760 * 100%);
		z-index: 5;
	}
	section#billboard .image02 {
		width: calc(430 / var(--per));
		left: calc(92 / var(--per));
		top: 0;
		z-index: 4;
	}
	section#billboard .image03 {
		width: calc(480 / var(--per));
		left: calc(920 / var(--per));
		top: calc(495 / 760 * 100%);
		z-index: 6;
	}

}
@media screen and (max-width: 767px) {
	section#billboard .wrap {
		height: calc(640 * var(--px));
		padding-inline: 0;
	}
	section#billboard .tagline {
		width: calc(350 * var(--px));
		top: calc(190 * var(--px));
		z-index: 10;
	}
	section#billboard .lead {
		padding-block: 0.4lh;
		padding-inline: var(--m);
		border-radius: 5px 0 0 5px;
		background: white;
		line-height: 1.5;
		font-weight: 700;
		left: 36%;
		right: 0;
		top: calc(400 * var(--px));
		z-index: 9;
	}
	section#billboard .lead span {
		padding: 0;
		letter-spacing: 0;
		background: transparent;
	}
	section#billboard .sticky {
		width: 30%;
		left: var(--m);
		top: calc(400 * var(--px));
		z-index: 10;
	}
	section#billboard .image01 {
		border-radius: 0;
		z-index: 0;
	}
	section#billboard :is(.image02, .image03) {
		border-radius: 5px;
	}
	section#billboard .image02 {
		width: 45%;
		left: 0;
		top: calc(100 * var(--px));
		z-index: 5;
	}
	section#billboard .image03 {
		width: 80%;
		left: 20%;
		bottom: calc(-1 * var(--m3));
		z-index: 5;
	}
}




section#about {
	--label-color: var(--main-text-color);
	padding-block: var(--m8) var(--m6);
}
section#about .background {
	width: 100vw;
	height: 120vh;
	opacity: 0.1;
	object-fit: cover;

	position: fixed;
	inset: 0;
	z-index: -1;

	animation: parallax-small-anim linear;
	animation-timeline: view();
}
@keyframes parallax-small-anim {
	from {
		transform: translateY(30%);
	}
	to {
		transform: translateY(-30%);
	}
}


section#lifetime {
	--label-color: white;
	--label-marker-color: var(--lifetime-text-color);
	background: url('imgs/bg-image-lifetime-color.webp');
}




section#funeral {
	--label-color: var(--funeral-text-color);
	background: url('imgs/bg-image-funeral-color.webp');
}
section#funeral .notice {
	margin-top: var(--m3);
	padding-inline: var(--m) var(--m2);
	position: relative;
}
section#funeral .notice :is(.image01, .image02) {
	position: absolute;
}

section#funeral .notice .eyecatch {
	padding-block: 0.1lh;
	padding-inline: 0.75ic;
	background: var(--main-text-color);
	border-radius: 5px 5px 20px 5px;
	font-size: var(--medium-size);
	color: white;
}
section#funeral .notice .text {
	padding-block: var(--m4);
	padding-inline: var(--m3);
	background-color: white;
	background-image: radial-gradient(circle at 100% 0%, #dce6d8, #dce6d8 15%, transparent 15%), radial-gradient(circle at 100% 0%, #dce6d8, #dce6d8 30%, transparent 30%), radial-gradient(circle at 100% 0%, #dce6d8, #dce6d8 45%, transparent 45%);
	background-blend-mode: multiply;
	border-radius: 10px;
	box-shadow: inset 0 0 0 3px var(--main-text-color);
	color: var(--main-text-color);
}
section#funeral .notice .headline {
	font-size: 24px;
	text-align: left;
}
section#funeral .notice .headline + p {
	color: var(--black);
}

section#funeral .notice .cta {
	margin-top: var(--m3);
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 768px) {
	section#funeral .notice {
		width: 66.66%;
	}
	section#funeral .notice .eyecatch {
		width: fit-content;
		box-sizing: content-box;
		letter-spacing: 0.1ic;
		position: absolute;
		left: var(--m3);
		top: 0;
		translate: 0 -50%;
	}
	section#funeral .notice .headline + p {
		width: 60%;
	}
	section#funeral .notice .image01 {
		width: calc(330 * var(--px));
		right: calc(-1 * var(--m4));
		top: calc(-1 * var(--m3));
	}
	section#funeral .notice .image02 {
		width: calc(264 * var(--px));
		right: var(--m4);
		top: var(--m6);
	}
}
@media screen and (max-width: 767px) {
	section#funeral .notice {
		margin-top: calc(120 * var(--px));
		padding-inline: 0;
	}
	section#funeral .notice .text {
		padding-block: var(--m8) var(--m2);
		padding-inline: var(--m2);
		background-color: white;
		background-image: radial-gradient(circle at 100% 100%, #dce6d8, #dce6d8 15%, transparent 15%), radial-gradient(circle at 100% 100%, #dce6d8, #dce6d8 30%, transparent 30%), radial-gradient(circle at 100% 100%, #dce6d8, #dce6d8 45%, transparent 45%);
	}
	section#funeral .notice .eyecatch {
		margin-bottom: 0.5lh;
		font-size: var(--large-size);
		text-align: center;
		position: relative;
	}
	section#funeral .notice .headline {
		text-align: center;
	}
	section#funeral .notice .image01 {
		width: 80%;
		right: auto;
		left: calc(-1 * var(--m2));
		top: calc(-1 * var(--m6));
	}
	section#funeral .notice .image02 {
		width: 60%;
		right: calc(-1 * var(--m));
		top: calc(-1 * var(--m));
	}
	section#funeral .notice .cta {
		justify-content: center;
	}
	section#funeral .notice .cta > a {
		height: auto;
	}
	section#funeral .notice .nav-contact {
		width: 80%;
	}
}


section#cleaning {
	--label-color: white;
	--label-marker-color: var(--cleaning-text-color);
	background: url('imgs/bg-image-cleaning-color.webp');
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}




section#asset {
	--label-color: var(--asset-text-color);
	background: url('imgs/bg-image-asset-color.webp');
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}




section#contact {
	--label-color: var(--main-text-color);
	padding-top: var(--m2);
	background: url('imgs/bg-image-main-color.webp');
}
section#contact-tel {
	position: relative;
}
section#contact-tel .label {
	color: white;
}
section#contact-tel .text {
	padding-block: var(--m3) var(--m2);
	padding-inline: var(--m4);
	background: white;
	border-radius: 10px 10px 40px 10px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}
section#contact-tel .eyecatch {
	width: fit-content;
	box-sizing: content-box;
	padding-inline: 0.75ic;
	background: var(--yellow);
	border-radius: 5px 5px 20px 5px;
	font-weight: 700;
	color: var(--main-text-color);
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% -50%;
}
section#contact-tel :is(.number, .note){
	margin-inline: auto;
}
section#contact-tel .note {
	margin-top: var(--m2);
}
@media screen and (min-width: 768px) {
	section#contact .wrap {
		width: 77%;
		max-width: 1080px;
	}
	section#contact-tel .label {
		text-align: left;
	}
	section#contact-tel .eyecatch {
		font-size: 36px;
	}
	section#contact-tel .number {
		width: calc(818 / 1080 * 100%);
	}
	section#contact-tel .note {
		width: calc(468 / 1080 * 100%);
	}
	section#contact-tel .image {
		width: calc(500 / var(--per));
		position: absolute;
		right: calc(-1 * var(--m3));
		top: calc(-1 * var(--m5));
	}
}
@media screen and (max-width: 767px) {
	section#contact-tel {
		display: flex;
		flex-direction: column;
	}
	section#contact-tel .eyecatch {
		font-size: var(--medium-size);
	}
	section#contact-tel .text {
		order: 3;
		margin-top: calc(-1 * var(--m));
		padding-inline: var(--m2);
	}
	section#contact-tel .image {
		order: 2;
		width: 80%;
		margin-inline: auto;
	}
}

section#contact-form {
	margin-top: var(--m6);
}
section#contact-form .label {
	color: white;
	--label-color: var(--pink);
}
section#contact-form .label strong {
	padding-block: 0.1lh;
	padding-inline: 0.75ic;
	margin-inline: 0;
}
section#contact-form .label + p {
	color: white;
}
section#contact-form .container {
	margin-top: var(--m6);
	padding-block: var(--m3);
	padding-inline: var(--m4);
	background: white;
	border-radius: 10px;
}
section#contact-form .agreement {
	margin-top: var(--m);
	margin-inline: auto;
}
section#contact-form .button {
	--button-color: var(--black);
	--button-hover-color: white;
	--button-bg: var(--yellow);
	--button-hover-bg: var(--pink);
}

@media screen and (min-width: 768px) {
	section#contact-form .button {
		width: calc(420 / 1080 * 100%);
		padding-block: 0.5lh;
		font-size: 18px;
	}

}
@media screen and (max-width: 767px) {
	section#contact-form {
		margin-top: var(--m3);
	}
	section#contact-form .label strong {
		padding-inline: 0.5ic;
		margin-inline: auto;
	}
	section#contact-form .container {
		padding-inline: var(--m);
	}
	section#contact-form .agreement {
		letter-spacing: -0.1ic;;
	}
}


/*  thanks
-------------------------------------------------------------------- */
body#thanks .nav-home {
	--button-color: var(--black);
	--button-hover-color: white;
	--button-bg: var(--yellow);
	--button-hover-bg: var(--pink);
	margin-top: var(--m3);
	margin-inline: auto;
}



/*  footer
-------------------------------------------------------------------- */
footer {
	padding-block: var(--m3);
	background: url('imgs/bg-image-main-color.webp');
	color: white;
	position: relative;
	z-index: 1;
}
footer::before {
	display: block;
	width: 100%;
	height: 100%;
	background: rgb( 0 0 0 / 0.3);
	background-blend-mode: multiply;
	position: absolute;
	inset: 0;
	z-index: -1;
}
footer .company {
	gap: var(--m);
	font-size: var(--regular-size);
	letter-spacing: 0.1ic;
}
footer .qr-code {
	font-size: 11px;
	line-height: 2;
	text-align: center;
	letter-spacing: -0.1ic;
}
footer .copyright {
	margin-top: var(--m6);
	text-align: center;
}
@media screen and (min-width: 768px) {
	footer .wrap {
		width: 77%;
		max-width: 1080px;
	}
	footer .logo {
		width: calc(310 / var(--per));
	}
	footer .company {
		line-height: calc(27 * var(--px));
	}
	footer .qr-code {
		width: calc(200 / var(--per));
		position: absolute;
		right: 0;
		top: calc(-1 * var(--m3));
		translate: 0 -30%;
	}
}
@media screen and (max-width: 767px) {
	footer {
		padding-bottom: var(--m5);
	}
	footer .company {
		display: block;
	}
	footer .logo {
		width: 60%;
		margin-inline: auto;
	}
	footer .address {
		margin-top: var(--m);
		font-size: var(--regular-size);
		text-align: center;
	}
	footer .qr-code {
		display: none;
	}
	footer .copyright {
		margin-top: var(--m4);
	}
}