@charset "utf-8";
/*BASE*/
body#home {
	padding-top:0 !important;
}

/*DEVICE：SP*/
@media screen and (max-width: 767px) {
/*HEADER*/
#mainvisual {
	display:flex;
	flex-flow: column nowrap;
	justify-content:center;
	align-items:center;
	width:100%;
	min-height:100vh;
	padding:40px 20px;
	color:rgba(250,250,250,1);
}
#mainvisual {
	background-color:transparent !important;
}
#mainvisual h1 {
	max-width:240px;
}
#mainvisual .info {
	display:block;
	color:rgba(250,250,250,1);
	text-align:center;
	padding:40px 0;
}
#mainvisual .info.anime-title {
	transition-delay:0s;
}
#mainvisual .info.anime-title.on {
	transition-delay:0s;
}
#mainvisual .info h2 {
	display:flex;
	align-items: center;
	justify-content: center;
	font-family: 'Noto Serif JP', serif;
	font-size:24px;
	margin-bottom:1rem;
}
#mainvisual .info h2::before,
#mainvisual .info h2::after{
	content: "";
	flex-grow:1;
	border-top:1px solid #FFF;
}
#mainvisual .info h2:before {
	margin-right: 1rem; 
}
#mainvisual .info h2:after {
	margin-left: 1rem; 
}
#mainvisual .info.anime-title.sp_none-transition
{
	opacity: 1;
	animation: none;
	transform: none;
	transition: unset;
}
#mainvisual .info.anime-title.sp_none-transition.on
{
	animation: none;
	transform: none;
	transition: unset;
}
/*CONTENTS*/
#mainvisual .contents {
	display:grid;
	grid-template-columns:1fr 1fr;
	place-items: center stretch;
	gap:20px 20px;
	width:100%;
}

#mainvisual .contents li.plan,
#mainvisual .contents li.company {
	width:100%;
	border:solid 2px rgba(255,255,255,0);
	position:relative;
	overflow:hidden;
	transition:border-color 1.2s ;
}
#mainvisual .contents li.plan.on,
#mainvisual .contents li.company.on {
	border:solid 1px rgba(255,255,255,1);
	transition-delay:1s;
}
#mainvisual .contents li.plan a,
#mainvisual .contents li.company a {
	display:block;
	width:100%;
	padding-top:100%;
	position:relative;
	overflow:hidden;
}
#mainvisual .contents li.plan a img.img,
#mainvisual .contents li.company a img.img {
	display:block;
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
#mainvisual .contents li.plan p,
#mainvisual .contents li.company p {
	display:block;
	font-size:12px;
	text-align:center;
	color:rgba(255,255,255,1);
	background-image:url(../images/filter_bk080.png);
	background-color:rgba(0,0,0,.5);
	width:100%;
	padding:1rem 0;
	pointer-events:none;
}
#mainvisual .contents li p span.ja,
#mainvisual .contents li p span.en {
	display:block;
	letter-spacing:normal;
}
#mainvisual .contents li p span.en {
	font-size:10px;
	color:rgba(84,143,242,1);
	font-weight:bold;
	text-indent:.2em;
	letter-spacing:.2em;
}
#mainvisual .contents li.plan a .bg {
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(48,69,197,.75);
	mix-blend-mode:soft-light;
	position:absolute;
	top:0;
	left:0;
}
#mainvisual .contents .contact {
	display:block;
	grid-row:2 / 3;
	grid-column:1 / 3;
}
#mainvisual .contents .contact h3 {
	display:flex;
	align-items: center;
	justify-content: center;
	font-size:14px;
	letter-spacing:.1em;
	margin-bottom:1rem;
}
#mainvisual .contents .contact h3::after{
	content: "";
	flex-grow:1;
	border-top:1px solid #999;
	margin-left: 1rem; 
}
#mainvisual .contents li.contact ul li {
	mix-blend-mode:screen;
}
#mainvisual .contents li.contact ul li:not(:last-child) {
	margin-bottom:1px;
}
#mainvisual .contents li.contact ul li.tel {
	background-color:rgba(255,255,255,1);
	text-align:left;
	width:100%;
}
#mainvisual .contents li.contact ul li.tel img {
	width:auto;
	height:80px;
}
#mainvisual .contents li.contact ul li a {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:center;
	color:#FFF;
	width:100%;
	height:100%;
	padding:10px;
}
#mainvisual .contents li.contact ul li a .icon {
	width:60px;
}
#mainvisual .contents li.contact ul li a p.comment {
	width:calc(100% - 70px);
	line-height:1.2;
}
#mainvisual .contents li.contact ul li.tel a {
	display:block;
	padding:0 0;
}
#mainvisual .contents li.contact ul li.line a {
	background-color:#06C755;
}
#mainvisual .contents li.contact ul li.mail a {
	background-color:rgba(84,143,242,1);
}

/*私たちは*/
#about {
	color:rgba(255,255,255,1);
	padding:40px 20px;
}
#about h1.title {
	font-size:24px;
	letter-spacing:.1em;
	margin-bottom:0;
}
#about .comment {
	font-size:12px;
	padding:40px 0 0;
}
#about .comment p.p {
	margin-bottom:2rem;
}
#about .comment ul li:not(:last-child) {
	margin-bottom:2.5rem;
}
#about .comment ul li h2.title {
	font-family: 'Noto Serif JP', serif;
	font-size:16px;
	margin-bottom:1rem;
}

/*プラン紹介*/
#plan {
	width:100%;
	color:rgba(250,250,250,1);
	padding:0;
}
#plan .plan-list,
#plan .plan-data {
	padding:40px 20px;
}
#plan .plan-list {
	background-color:rgba(111,53,158,.4);
}
#plan .plan-list dl {
	font-size:18px;
	display:grid;
	grid-template-columns:1fr auto;
	place-items: stretch stretch;
	gap:0;
}
#plan .plan-list dl dt,
#plan .plan-list dl dd {
	padding:0 1rem .5rem;
	margin-bottom:.5rem;
	border-bottom: dotted 1px #FFF;
}
#plan .plan-list dl dt.public-assistance-act_article-18,
#plan .plan-list dl dd.public-assistance-act_article-18 {
	border-bottom: none 0px;
	padding-bottom:0;
}
#plan .plan-list dl dd:not(.supplementary-explanation) {
	text-align:right;
}
#plan .plan-list dl dd.supplementary-explanation {
	font-size:12px;
	line-height:1.6;
	white-space:normal;
	grid-column: 1 / 3;
}
#plan .plan-list dl dt:last-of-type,
#plan .plan-list dl dd:last-of-type {
	margin-bottom:0;
}
#plan .plan-data {
	color:#333;
	background-color:rgba(229,224,197,1);
}
#plan .plan-data ul li {
	display:inline-block;
	margin-right:1em;
}
#plan .plan-data ul li::before {
	content:"・";
	display:inline-block;
	margin-right:.25em;
}
#plan .plan-data .plan-service {
	margin-bottom:2em;
}
#plan .plan-data .ect-fee {
	margin-bottom:2em;
}

/*斎場紹介*/
#funeral-home {
	color:rgba(250,250,250,1);
	background-color:rgba(0,0,0,1);
	padding:60px 0;
}
#funeral-home h1.title {
	color:rgba(250,250,250,1);
	padding:0 1rem;
	margin-bottom:1rem;
}
#funeral-home p {
	padding:0 1.8rem;
	margin-bottom:2rem;
}

#funeral-home .area {
	padding:0 1rem;
	margin-bottom:2rem;
}
#funeral-home .area h2 {
	font-size:16px;
	text-align:center;
	margin-bottom:1rem;
}
#funeral-home .area p {
	font-size:12px;
	padding:0 1rem;
	margin-bottom:1rem;
}
#funeral-home .area p.title {
	font-size:12px;
	text-align:center;
}
#funeral-home .area ul {
	font-size:12px;
	letter-spacing:.2em;
	text-align:left;
	padding:0 1rem;
	margin:auto;
}
#funeral-home .area ul li {
	display:inline-block;
}
#funeral-home .area ul li::before {
	content:"・";
	display:inline-block;
	margin-right:.25em;
}

#funeral-home .area dl {
	font-size:12px;
	letter-spacing:.2em;
	text-align:left;
	padding:0 1rem;
	margin:auto;
}
#funeral-home .area dl dt {
	display:block;
	font-size:14px;
	text-align:center;
	margin-bottom:.5rem;
}
#funeral-home .area dl dd {
	display:inline-block;
	margin-right:.5em;
}
#funeral-home .area dl dd::before {
	content:"・";
	display:inline-block;
	margin-right:.25em;
}
#funeral-home .area dl dt a,
#funeral-home .area dl dd a {
	color:#FFF;
}

#funeral-home .religion {
	padding:0 1rem;
}
#funeral-home .religion h2 {
	font-size:16px;
	text-align:center;
	margin-bottom:1rem;
}
#funeral-home .religion p {
	font-size:12px;
	padding:0 1rem;
	margin-bottom:1rem;
}
#funeral-home .religion p.title {
	font-size:12px;
	text-align:center;
}
#funeral-home .religion ul {
	font-size:12px;
	letter-spacing:.2em;
	text-align:left;
	padding:0 1rem;
	margin:auto;
}
#funeral-home .religion ul li:not(:last-child) {
	display:inline-block;
}
#funeral-home .religion ul li:not(:last-child)::before {
	content:"・";
	display:inline-block;
	margin-right:.25em;
}
#funeral-home .religion ul li:last-child {
	display:inline-block;
}
}


/*DEVICE：PC TAB*/
@media screen and (min-width: 768px) {
/*HEADER*/
#mainvisual {
	display:flex;
	flex-flow: column nowrap;
	justify-content:center;
	align-items:center;
	width:100%;
	/*min-height:100vh;*/
	padding:80px 0 60px;
	color:rgba(250,250,250,1);
	
}
#mainvisual {
	background-color:transparent !important;
}
#mainvisual h1 {
	display:block;
	font-size:60px;
	line-height:1;
	color:rgba(250,250,250,1);
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#mainvisual .info {
	display:block;
	font-size:18px;
	color:rgba(250,250,250,1);
	text-align:center;
	width:1080px;
	padding:60px 0;
	margin:auto;
}
#mainvisual .info.anime-title {
	transition-delay:0s;
}
#mainvisual .info.anime-title.on {
	transition-delay:0s;
}
#mainvisual .info h2 {
	display:flex;
	align-items: center;
	justify-content: center;
	font-family: 'Noto Serif JP', serif;
	font-size:32px;
	margin-bottom:2rem;
}
#mainvisual .info h2::before,
#mainvisual .info h2::after{
	content: "";
	flex-grow:1;
	border-top:1px solid #FFF;
}
#mainvisual .info h2:before {
	margin-right: 1rem; 
}
#mainvisual .info h2:after {
	margin-left: 1rem; 
}
#mainvisual ul.pc li a {
	color:rgba(255,255,255,1);
}
#mainvisual p {
}
#mainvisual address {
	font-size:32px;
	letter-spacing:.1em;
	padding:.5rem 3rem;
	background-color:rgba(0,0,0,0.4);
	border:solid 1px rgba(250,250,250,1);
}
/*CONTENTS*/
#mainvisual .contents {
	display:grid;
	grid-template-columns:1fr 1fr 1.5fr;
	place-items: end stretch;
	gap:0 30px;
	width:1080px;
	margin:auto;
}
#mainvisual .contents li.plan,
#mainvisual .contents li.company {
	width:100%;
	border:solid 2px rgba(255,255,255,0);
	position:relative;
	overflow:hidden;
	transition:border-color 1.2s ;
}
#mainvisual .contents li.plan.on,
#mainvisual .contents li.company.on {
	border:solid 2px rgba(255,255,255,1);
	transition-delay:1s;
}
#mainvisual .contents li.plan a,
#mainvisual .contents li.company a {
	display:block;
	width:100%;
	padding-top:124%;
	position:relative;
	overflow:hidden;
}
#mainvisual .contents li.plan a img.img,
#mainvisual .contents li.company a img.img {
	display:block;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	transition:transform ease .6s;
}
#mainvisual .contents li.plan a:hover img.img,
#mainvisual .contents li.company a:hover img.img {
	transform: scale(1.2,1.2);
}
#mainvisual .contents li.plan p,
#mainvisual .contents li.company p {
	display:block;
	color:rgba(255,255,255,1);
	background-image:url(../images/filter_bk080.png);
	background-color:rgba(0,0,0,.8);
	/*width:240px;*/
	padding:1rem 2rem;
	pointer-events:none;
	position:absolute;
	/*top:50%;
	left:0;
	transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);*/
	text-align:center;
	width:100%;
	bottom:0;
	left:0;
}
#mainvisual .contents li p span.ja,
#mainvisual .contents li p span.en {
	display:block;
	letter-spacing:.08em;
}
#mainvisual .contents li p span.ja {
}
#mainvisual .contents li p span.en {
	font-size:12px;
	color:rgba(84,143,242,1);
	font-weight:bold;
}
#mainvisual .contents li.plan a .bg {
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(48,69,197,.75);
	mix-blend-mode:soft-light;
	position:absolute;
	top:0;
	left:0;
}
#mainvisual .contents .contact {
	display:block;
}
#mainvisual .contents .contact h3 {
	display:flex;
	align-items: center;
	justify-content: center;
	font-size:16px;
	letter-spacing:.1em;
	margin-bottom:1rem;
}
#mainvisual .contents .contact h3::after{
	content: "";
	flex-grow:1;
	border-top:1px solid #999;
	margin-left: 1rem; 
}
#mainvisual .contents li.contact ul li {
	mix-blend-mode:screen;
}
#mainvisual .contents li.contact ul li:not(:last-child) {
	margin-bottom:1px;
}
#mainvisual .contents li.contact ul li:hover {
	mix-blend-mode:normal;
}
#mainvisual .contents li.contact ul li.tel {
	background-color:rgba(255,255,255,1);
	text-align:left;
	width:100%;
}
#mainvisual .contents li.contact ul li.tel img {
	width:auto;
	height:80px;
}
#mainvisual .contents li.contact ul li a {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:center;
	color:#FFF;
	width:100%;
	height:100%;
	padding:10px;
}
#mainvisual .contents li.contact ul li a .icon {
	width:60px;
}
#mainvisual .contents li.contact ul li a p.comment {
	width:calc(100% - 80px);
	line-height:1.2;
}
#mainvisual .contents li.contact ul li.line a {
	background-color:#06C755;
}
#mainvisual .contents li.contact ul li.mail a {
	background-color:rgba(84,143,242,1);
}


/*私たちは*/
#about {
	color:rgba(255,255,255,1);
	padding:80px 0;
}
#about h1.title {
	font-size:32px;
	letter-spacing:.1em;
	width:1080px;
	margin:auto;
}
#about .comment h2.title {
	font-family: 'Noto Serif JP', serif;
	font-size:32px;
	margin-bottom:1rem;
}
#about .comment {
	text-align:center;
	width:1080px;
	padding:60px 0;
	margin:auto;
}
#about .comment p.p {
	margin-bottom:3rem;
}
#about .comment ul li:not(:last-child) {
	margin-bottom:4rem;
}

/*プラン紹介*/
#plan {
	display:flex;
	flex-flow: row nowrap;
	justify-content:space-between;
	align-items:stretch;
	width:100%;
	color:rgba(250,250,250,1);
	padding:0;
}
#plan .plan-list,
#plan .plan-data {
	width:calc(100% / 2);
	padding:60px;
}
#plan .plan-list {
	background-color:rgba(111,53,158,.4);
	display:flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items:center;
	gap:40px;
	padding-right:40px;
}
#plan .plan-list dl {
	font-size: clamp(20px, 2vw, 24px);
	line-height:1;
	display:grid;
	grid-template-columns:1fr auto;
	place-items: stretch stretch;
	gap:0;
}
#plan .plan-list dl dt,
#plan .plan-list dl dd {
	white-space:nowrap;
	padding:1rem 1rem 1rem;
	border-bottom: dotted 1px #FFF;
}
#plan .plan-list dl dt.public-assistance-act_article-18,
#plan .plan-list dl dd.public-assistance-act_article-18 {
	border-bottom: none 0px;
	padding-bottom:0;
}
#plan .plan-list dl dt:nth-of-type(1),
#plan .plan-list dl dd:nth-of-type(1) {
	white-space:nowrap;
	padding-top:0;
}
#plan .plan-list dl dt {
	padding-right:0;
}
#plan .plan-list dl dt sup {
	line-height:0;
}
#plan .plan-list dl dd:not(.supplementary-explanation) {
	text-align:right;
}
#plan .plan-list dl dd.supplementary-explanation {
	font-size:12px;
	line-height:1.6;
	white-space:normal;
	grid-column: 1 / 3;
}
#plan .plan-list dl dt:last-of-type,
#plan .plan-list dl dd:last-of-type {
	margin-bottom:0;
}
#plan .plan-data {
	color:#333;
	background-color:rgba(229,224,197,1);
	padding-left:40px;
}
#plan .plan-data ul li {
	display:inline-block;
	margin-right:1em;
}
#plan .plan-data ul li::before {
	content:"・";
	display:inline-block;
	margin-right:.25em;
}
#plan .plan-data .plan-service {
	margin-bottom:3em;
}
#plan .plan-data .ect-fee {
	margin-bottom:3em;
}
#plan .plan-data p.button a.bt-txt {
	font-size:20px;
	padding:1rem;
	max-width:none;
	border-radius:6px;
}

/*式場紹介*/
#funeral-home {
	color:rgba(250,250,250,1);
	background-color:rgba(0,0,0,1);
	padding:60px 0;
}
#funeral-home h1.title {
	color:rgba(250,250,250,1);
	margin-bottom:1rem;
}
#funeral-home p {
	text-align:center;
	margin-bottom:2rem;
}
#funeral-home p.title {
	margin-bottom:1rem;
}

#funeral-home .area {
	width:1080px;
	text-align:center;
	margin:0 auto 4rem;
}
#funeral-home .area h2 {
	font-size:24px;
	margin-bottom:1rem;
}
#funeral-home .area ul {
	font-size:13px;
	letter-spacing:.2em;
	margin:auto;
}
#funeral-home .area ul li {
	display:inline-block;
	margin-right:1em;
}
#funeral-home .area ul li::before {
	content:"・";
	display:inline-block;
	margin-right:.25em;
}

#funeral-home .area dl {
	font-size:13px;
	letter-spacing:.2em;
	margin:auto;
}
#funeral-home .area dl dt {
	display:block;
	font-size:16px;
	margin-bottom:.5rem;
}
#funeral-home .area dl dd {
	display:inline-block;
	margin-right:.5em;
}
#funeral-home .area dl dd::before {
	content:"・";
	display:inline-block;
	margin-right:.25em;
}
#funeral-home .area dl dt a,
#funeral-home .area dl dd a {
	color:#FFF;
}

#funeral-home .religion {
	width:1080px;
	text-align:center;
	margin:auto;
}
#funeral-home .religion h2 {
	font-size:24px;
	margin-bottom:1rem;
}
#funeral-home .religion ul {
	font-size:13px;
	letter-spacing:.2em;
	margin:auto;
}
#funeral-home .religion ul li:not(:last-child) {
	display:inline-block;
	margin-right:1em;
}
#funeral-home .religion ul li:not(:last-child)::before {
	content:"・";
	display:inline-block;
	margin-right:.25em;
}
#funeral-home .religion ul li:last-child {
	display:inline-block;
}
}