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

	Default
	
==================================================================== */
:root {
	--black: #2b3332;
	--yellow: #fff471;
	--pink: #ef8b77;

	--main-bg-color: #518043;
	--main-text-color: #498337;

	--lifetime-bg-color: #659991;
	--lifetime-text-color: #469c91;

	--funeral-bg-color: #f2f7f0;
	--funeral-text-color: #638754;

	--cleaning-bg-color: #f7b22f;
	--cleaning-text-color: #f7a200;

	--asset-bg-color: #fcf5ed;
	--asset-text-color: #977b59;

	--text: var(--black, black);
	--border: var(--gray, lightgray);
	--base: var(--white, white);
	--accent: var(--yellow, orange);
	--action: var(--pink, blue);
	--alert: var(--red, red);

	--bw: 1600;/* ブラウザ幅の想定値（アートボードの横幅） */
	/* ブラウザ幅に比例するpxベースのレスポンシブサイズを割り出す */
	--px: clamp(0.75px, calc(100vw / var(--bw)), 1px);

	--mw: 1400;/* --main-widthの数値のみ（単位なし）*/
	/* メイン幅を基準にした横方向のみの比率 */
	--per: var(--mw) * 100%;

	--m: calc(20 * var(--px));
    --m2: calc( var(--m) * 2 );
    --m3: calc( var(--m) * 3 );
    --m4: calc( var(--m) * 4 );
    --m5: calc( var(--m) * 5 );
    --m6: calc( var(--m) * 6 );
    --m7: calc( var(--m) * 7 );
    --m8: calc( var(--m) * 8 );
    --m9: calc( var(--m) * 9 );
    --m10: calc( var(--m) * 10 );
    --ms: calc( var(--m) / 3 * 2 );
	
    --main-width: 1400px;
	--wrap-padding-inline: var(--m);
    --header-height: calc(105 * var(--px));

	--large-size: calc(48 * var(--px));
	--medium-size: 21px;
	--regular-size: 16px;
	--small-size: 12px;

	--transition: 0.3s 0s ease;
}
@media screen and (max-width: 767px) {
	:root {
		--bw: 375;
		--m: calc(15 * var(--px));

		--main-width: 100%;
		--header-height: calc(80 * var(--px));

		--large-size: calc(24 * var(--px));
		--medium-size: calc(21 * var(--px));
		--regular-size: calc(16 * var(--px));
		--small-size: calc(11 * var(--px));
	}
}


html {
	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
	scroll-behavior: smooth;

	font-feature-settings: "palt";
}


body {
	width: 100svw;
	overflow-x: clip;
	position: relative;

	font-size: var(--regular-size);
	line-height: 1.75;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** 疑似要素   
-------------------------------------------------------------------- */
* {
	box-sizing: border-box;
}
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}


/** テキスト   
-------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
}
p + p:not([class]),
li + li {
    margin-top: 1lh;
}
strong {
    font-weight: 700;
}
ul, ol {
	margin-block: 0.75lh;
}
ol {
	list-style: decimal;
	padding-inline-start: 1.5ic;
}
dt {
    font-weight: 400;
}
@media screen and (max-width: 767px) {
	p {
		text-align: left;
	}
}


/** 改行   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	br:is([sp], .sp, .sp-only) {
		display: none;
	}
	br:is([pc], .pc, .pc-only) {
		display: revert;
	}
}
@media screen and (max-width: 767px) {
	br:is([pc], .pc, .pc-only) {
		display: none;
	}
	br:is([sp], .sp, .sp-only) {
		display: revert;
	}
}


/** リンク   
-------------------------------------------------------------------- */
a {
	color: inherit;
    text-decoration: none;
    transition: var(--transition);
}
a:has(img) {
	display: block;
}
a:not([class]) {
	color: currentColor;
	text-underline-offset: 4px;
}
@media (hover: hover) {
	a:not([class]) {
		text-decoration: underline;
	}
	a:not([class]):hover {
		text-decoration: none;
	}
}

a:where(:link) {
	color: var(--link-color, inherit);
}
a:where(:visited) {
	color: var(--visited-color, var(--link-color, inherit));
}
a:where(:focus) {
	background: var(--focus-bg, var(--hover-bg, inherit));
	color: var(--focus-color, var(--hover-color, inherit));
}
@media (hover: hover) {
	a:where(:hover) {
		background: var(--hover-bg, inherit);
		color: var(--hover-color, inherit);
	}
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** イメージ   
-------------------------------------------------------------------- */
img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: top;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}

img:is(.image, [class*="image"]) {
	border-radius: 10px;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}

/* ====================================================================

	Object
	
==================================================================== */

/** テキスト   
-------------------------------------------------------------------- */
:is(.label, .headline) {
	margin-bottom: 0.75lh;
	text-align: center;
	line-height: 1.5;
}

/* 汎用的な見出し（アクセス・募集要項・お問い合わせフォーム） */
.label {
	font-size: var(--large-size);
	color: var(--label-color, inherit);
}
.label strong {
	padding-inline: 0.3ic;
	margin-inline: 0.3ic;
	background: var(--label-color, inherit);
	border-radius: 5px;
	color: var(--label-marker-color, white);
}
/* より具体的な文体の見出し */
.headline {
	font-size: var(--medium-size);
}
.label + p {
	color: var(--label-color, inherit);
	margin-inline: auto;
}
.headline + p {
	color: var(--headline-color, inherit);
}
@media screen and (min-width: 768px) {
	.label + p {
		width: calc(900 / var(--per));
		text-align: center;
	}
}
@media screen and (max-width: 767px) {
	.label + p {
		width: 90%;
		text-align: justify;
	}
}




/** ボタン   
-------------------------------------------------------------------- */
.button {
    display: block;
    width: fit-content;
	padding-block: 0.3lh;
    padding-inline: 1ic;
	border-radius: 2lh;
    background: var(--button-bg, var(--action, inherit));
	box-shadow: inset 0 0 0 var(--button-border-weight, 0) var(--button-border-color, transparent);

	font-size: inherit;
    color: var(--button-color, inherit);
	line-height: 1.5;
	font-weight: 700;
    text-align: center;
}
.button:has(svg, i, .icon) {
	display: flex;
	align-items: center;
}
@media (hover: hover) {
	.button {
		transition: var(--transition);
	}
	.button:hover {
		background: var(--button-hover-bg, var(--button-bg));
		box-shadow: inset 0 0 0 var(--button-border-hover-weight, inherit) var(--button-border-hover-color, var(--button-border-color));
		color: var(--button-hover-color, var(--button-color));
	}
}
:where(a, button, .button) svg {
	display: inline-block;
	height: 1lh;
	fill: currentColor;
}
:where(a, button, .button) svg:first-child {
	margin-right: 0.3ic;
}
@media screen and (max-width: 767px) {
	.button {
		padding-block: 0.5lh;
	}
	.button:has(svg) {
		justify-content: center;
	}
}




/** ヘッダー  
-------------------------------------------------------------------- */
header {
	width: 100%;
	height: var(--header-height);
}
header.fixed {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

body:has(header.fixed) {
	scroll-padding-top: var(--header-height, 0px);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}





/** ラッパー   
-------------------------------------------------------------------- */
.wrap {
	width: auto;
	max-width: var(--main-width);
	box-sizing: content-box;
	padding-inline: var(--wrap-padding-inline);
	margin-inline: auto;

	position: relative;
	z-index: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** セクション   
-------------------------------------------------------------------- */
main.content > section {
	padding-block: var(--m6);
	position: relative;
	z-index: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	main.content > section {
		padding-bottom: var(--m3);
	}
}





/** スクロールフレーム  
-------------------------------------------------------------------- */
.scroll-vertical {
	height: 8lh;
	padding-block: var(--m3);
	padding-inline: var(--m2);
	background: ghostwhite;
	border: 1px solid lightgray;
	overflow-y: scroll;
}



/** カード  
-------------------------------------------------------------------- */
.container:has(.card) {
	margin-top: var(--m4);
}
.card {
	padding: var(--m);
}
.card .text {
	margin-top: calc(-1 * var(--m3));
	margin-inline: calc(15 * var(--px));
	padding-block: var(--m) var(--m2);
	padding-inline: var(--m3);
	border-radius: 10px 10px 40px 10px;
	background: white;
	box-shadow: 5px 5px 5px 0 rgb(0 0 0 / 0.05);

	position: relative;
	z-index: 1;
}
.card .headline {
	margin-block: 0.5lh;
	font-size: var(--medium-size);
}
.card .headline:after {
	display: block;
	width: 1.5lh;
	height: 3px;
	background: var(--pink);
	margin-top: 0.5lh;
	margin-inline: auto;
}
.card .headline + p {
	text-align: justify;
}
@media screen and (min-width: 768px) {
	.card {
		width: 33.33%;
	}
	.card.wide {
		flex: 0 0 calc(1080 / var(--per));
		margin-inline: auto;
		display: flex;
		align-items: center;
	}
	.card.wide :is(.image, .text) {
		width: calc(600 / 1080 * 100%);
	}
	.card.wide .text {
		margin-left: calc(-1 * var(--m6));
	}
	.card.wide .headline {
		font-size: 24px;
		text-align: left;
	}
	.card.wide .headline:after {
		margin-left: 0;
	}
}
@media screen and (max-width: 767px) {
	.card {
		padding-inline: 0;
	}
}



/** フレックスボックス  
-------------------------------------------------------------------- */
/* flex direction */
:where(.row, [class*="row"], .column, [class*="column"]) {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
:where([class*="row"]) {
	flex-flow: row wrap;
}
:where([class*="row-reverse"]) {
	flex-flow: row-reverse wrap;
}
:where([class*="row"]) > * {
	flex: 0 1 auto;
}
:where([class*="column"]) {
	flex-flow: column wrap;
}
:where([class*="column-reverse"]) {
	flex-flow: column-reverse wrap;
}
@media screen and (min-width: 768px) {
	:where([class*="row-"][class*="pc-"]) {
		flex-flow: row wrap;
	}
	:where([class*="row-reverse"][class*="pc-"]) {
		flex-flow: row-reverse wrap;
	}
}
@media screen and (max-width: 767px) {
	:where([class*="row-"][class*="sp-"]) {
		flex-flow: row wrap;
	}
	:where([class*="row-reverse"][class*="sp-"]) {
		flex-flow: row-reverse wrap;
	}
}

/* flex wrap */
:where([class*="row-nowrap-"], [class*="column-nowrap-"]) {
	flex-wrap: nowrap;
}

/* flex horizontal align */
:where([class*="row-"][class*="start"]) {
	justify-content: flex-start;
}
:where([class*="row-"][class*="end"]) {
	justify-content: flex-end;
}
:where([class*="row-"][class*="center"]) {
	justify-content: center;
}
:where([class*="row-"][class*="between"]) {
	justify-content: space-between;
}

:where([class*="column-"][class*="start"]) {
	align-items: flex-start;
}
:where([class*="column-"][class*="end"]) {
	align-items: flex-end;
}
:where([class*="column-"][class*="center"]) {
	align-items: center;
}

/* flex vertical align */
:where([class*="row-"][class*="top"]) {
	align-items: flex-start;
}
:where([class*="row-"][class*="bottom"]) {
	align-items: flex-end;
}
:where([class*="row-"][class*="middle"]) {
	align-items: center;
}
:where([class*="column-"][class*="top"]) {
	justify-content: flex-start;
}
:where([class*="column-"][class*="bottom"]) {
	justify-content: flex-end;
}
:where([class*="column-"][class*="middle"]) {
	justify-content: center;
}



/** フォーム  
-------------------------------------------------------------------- */
form {}
form dl {}
form dl + dl {
    margin-top: var(--m2);
}
form dd {
	-webkit-margin-start: 0;
	margin-inline-start: 0;
}
form button {
	border: none;
	cursor: pointer;
}
form dt {
	margin-bottom: 0.3lh;
	font-size: 18px;
	font-weight: 700;
    position: relative;
}
form dd {}
form dd + dd {
	margin-top: var(--m);
}
form dl:has([aria-required], [required]) dt::after {
	content: var(--item-text, "必須");
	display: inline-block;
	padding-inline: 0.5ic;
	background: var(--alert);
    color: var(--white, white);
    font-weight: 500;
	margin-left: 1.5ic;
}
form label {
	display: block;
    width: fit-content;
    max-width: 100%;
    padding-block: 0.25lh;
}
form dd .note {
	flex: 0 0 100%;
	font-size: 75%;
	color: var(--gray, gray);
}
form dd:has(input:user-invalid) .note {
	color: var(--alert, red);
}
form :is(input, textarea)::placeholder,
option[disabled] {
    color: rgb(from var(--black, black) r g b / 0.5);
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form textarea,
form select {
	padding-inline: 0.5ic;
    background: var(--white, white);
	border: 1px solid lightgray;
	border-radius: 3px;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):focus-visible,
form textarea:focus-visible,
form select:focus-visible {
	outline: var(--outline, dodgerBlue) auto 1px;
    border-color: transparent;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):user-invalid,
form textarea:user-invalid,
form select:user-invalid {
	outline: var(--alert, red) auto 1px;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form textarea {
    width: 100%;
	box-sizing: border-box;
    padding-block: 0.5lh;
}
form input:is([type="checkbox"], [type="radio"]) {
	appearance: auto;
    inline-size: 1ic;
    block-size: 1ic;
    accent-color: var(--action);
	display: inline-block;
	vertical-align: baseline;
}
form label:has(select) {
    position: relative;
}
form label:has(select)::after {
    --size: calc(12 * var(--px));
    display: block;
    width: var(--size);
    height: var(--size);
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    rotate: 45deg;

    position: absolute;
    top: 50%;
    right: calc(var(--m) / 2);
    translate: 0 -50%;

    transition: var(--transition);
    pointer-events: none;
}

form select {
	appearance: none;
    width: auto;
    padding-block: 0.5lh;
    padding-right: var(--m2);
	cursor: pointer;
}
form textarea {
	min-height: 10lh;
	field-sizing: content;
}

form [type="submit"]:is(button, input) {
    margin-block: var(--m2) var(--m);
	margin-inline: auto;
}
@media (hover: hover) {
	form [type="submit"]:is(button, input) {
		cursor: pointer;
	}
}
@media screen and (min-width: 768px) {
    form label:has(select)::after {
        --size: calc(12 * var(--px));
    }
}
@media screen and (max-width: 767px) {
	form dl:has([aria-required], [required]) dt::after {
		font-size: 75%;
	}
}