@charset "utf-8";
/* CSS Document */
/*######################################################
基本設定
######################################################*/
@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Kosugi+Maru&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Sawarabi+Gothic&family=Sawarabi+Mincho&display=swap');
/*
font-family: 'Kosugi', sans-serif;
font-family: 'Kosugi Maru', sans-serif;
font-family: 'M PLUS 1p', sans-serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Sawarabi Gothic', sans-serif;
font-family: 'Sawarabi Mincho', sans-serif;
*/
html {
	height: 100%;
}
body {
	color: #333;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 18px;
	line-height: 1.6;
	height: 100%;
	background: url(../img/bg_top01.svg) no-repeat left top / 331px, url(../img/bg_top02.svg) no-repeat right top / 187px;
}
img {
	max-width: 100%;
	height: auto;
	width /***/ : auto;
	vertical-align: bottom;
}
a {
	color: #007133;
	text-decoration: none;
	transition: 0.3s;
	cursor: pointer;
}
a:hover {
	opacity: 0.5;
}
@media (max-width: 768px) {
	html {}
	body {
		font-size: 14px;
		background: url(../img/bg_top01.svg) no-repeat left top / 110px, url(../img/bg_top02.svg) no-repeat right top / 62px;
	}
	img {}
	a {}
	a:hover {}
}
/*######################################################
共通箇所
######################################################*/
/*//////////////////////////////////////
header
//////////////////////////////////////*/
header {
	box-sizing: border-box;
	z-index: 10000;
	padding: 10px calc(50% - 500px) 20px;
}
.header_inner {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
header .logo {
	white-space: nowrap;
	font-size: 14px;
	line-height: 1.2;
	display: inline-block;
	padding: 10px 0 10px 10px;
	margin: -10px 0 0 -10px;
}
header .logo:hover {
	opacity: 0.5;
}
header .logo img {
	height: 45px;
	/* filter: brightness(0) invert(1); */
	float: left;
	margin: 0 10px 0 0;
}
header .logo strong {
	display: block;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 15px;
}
.header_contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 12px;
	line-height: 1;
	padding: 5px 0 0;
}
.header_contact a[href^="tel:"] {
	position: relative;
	font-size: 40px;
	font-weight: 900;
	margin: 0 0 3px;
	pointer-events: none;
}
.header_contact a[href^="tel:"]:before {
	/*content: "\f095";
	font-family: FontAwesome;
	font-weight: normal;
	border: solid 3px;
	border-radius: 50%;
	font-size: 20px;
	display: inline-block;*/
	content: "";
		background-image: url("../img/icn_tel.svg");
		display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 28px;
	text-align: center;
	vertical-align: bottom;
	margin: 0 5px 2px 0;
}
.header_contact a[href^="tel:"]:after {
	content: "葬儀のご相談お問い合わせはこちら";
	position: absolute;
	top: -14px;
	right: 0;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
}
@media (max-width: 768px) {
	header {
		flex-direction: column;
		position: relative;
		padding: 10px;
	}
	.header_inner {
		padding: 0;
	}
	header .logo {
		padding: 0;
		margin: 0 0 10px;
		display: block;
		font-size: 10px;
	}
	header .logo:hover {}
	header .logo img {
		height: 50px;
	}
	header .logo strong {
		font-size: 21px;
	}
	.header_contact {
		display: none;
	}
	.header_contact a[href^="tel:"] {}
	.header_contact a[href^="tel:"]:before {}
	.header_contact a[href^="tel:"]:after {}
}
/*//////////////////////////////////////
nav
//////////////////////////////////////*/
nav {
	position: relative;
	z-index: 100;
	min-width: 1000px;
	padding: 0 calc(50% - 500px);
	border: solid rgb(0, 113, 51);
	border-width: 2px 0;
}
nav .sp_menu {
	display: none;
}
nav .sp_menu_bg {
	display: none;
}
nav > ul {
	display: flex;
	justify-content: space-around;
	list-style: none;
}
nav > ul .sp_login {
	/* position: absolute; */
	/* right: 0; */
	/* top: -40px; */
	font-size: 13px;
	font-weight: 500;
	display: flex;
	flex: auto;
	justify-content: flex-end;
}
nav > ul .sp_login a {
	color: #fff;
	display: inline-block;
	padding: 10px 20px;
	position: relative;
}
nav > ul .sp_login a:before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	bottom: 0;
	margin: auto;
	height: 18px;
	border-left: solid 1px;
}
nav > ul .sp_login a:first-of-type:before {
	content: none;
}
nav > ul > li {
	flex: auto;
}
nav > ul > li.contact {
	display: none;
}
nav > ul > li.attention {
	display: none;
}
nav ul li a {
	display: block;
	margin: 0;
	padding: 10px 20px;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	font-family: 'Kosugi Maru', sans-serif;
}
nav ul li a:hover {
	background: #007133;
	color: #fff;
}
nav > ul > li > a.active {
	background: #A4D5B9;
	pointer-events: none;
}
nav > ul > li > a.active:hover {
	opacity: unset;
}
nav > ul > li > a.active.on:before {
	content: none;
}
nav > ul > li > a > img {
	width: 50px;
}
nav > ul > li > a > span {
	display: none;
}
nav > ul > li:hover > a {
	opacity: 1;
}
nav > ul > li:hover > a:before {
	opacity: 1;
}
nav > ul > li > ul {
	position: absolute;
	z-index: 100;
	top: calc(100% - 6px);
	left: 5px;
	/* width: 100%; */
	padding: 5px;
	background: rgba(255, 255, 255, 1);
	/* box-shadow: 0px 2px 5px rgba(0,0,0,.5); */
	box-sizing: border-box;
	transition: 0.3s;
	opacity: 0;
	visibility: hidden;
	white-space: nowrap;
}
nav > ul > li > ul li { /* padding: 5px; */
}
nav > ul > li > ul li a {
	color: #52C7FE;
	padding: 10px;
}
nav > ul > li:hover > ul {
	opacity: 1;
	visibility: visible;
}
nav.fixed {
	position: fixed;
	top: 0;
	background: rgba(0, 113, 51, 0.8);
	animation-name: navi;
	animation-duration: 1s;
	animation-timing-function: ease;
	left: 0;
	margin: 0;
	backface-visibility: hidden;
	width: 100%;
}
@keyframes navi {
	0% {
		top: -100px;
	}
	100% {
		top: 0;
	}
}
nav.fixed > ul {
	position: relative;
	justify-content: start;
}
nav.fixed > ul > li:first-of-type {
	display: block;
}
nav.fixed > ul > li:first-of-type a { /* background: transparent !important; */
}
nav.fixed > ul > li:first-of-type:hover a { /* opacity: .7; */
}
nav.fixed > ul > li {}
nav.fixed > ul > li a {
	color: #fff;
}
nav.fixed > ul > li > a:before {
	content: none;
}
nav.fixed > ul > li:hover > a, nav.fixed > ul > li:hover > a.active.on {
	background: rgba(255, 255, 255, .5);
	/* color: #52C7FE; */
}
nav.fixed > ul > li > a.active {
	/* background: rgba(255, 255, 255, .5); */
	/* color: #52C7FE; */
}
nav.fixed > ul > li > a.active.on {
	background: transparent;
	color: #fff;
}
nav.fixed > ul > li:hover > a:before {}
nav.fixed > ul > li > ul {
	background: rgba(255, 255, 255, .9);
	left: 0;
	top: 100%;
}
nav.fixed > ul > li > ul li {}
nav.fixed > ul > li > ul li a {}
nav.fixed > ul .sp_login {
	position: relative;
	right: inherit;
	top: inherit;
	display: flex;
	flex: auto;
	justify-content: flex-end;
}
nav.fixed > ul .sp_login a {
	align-items: center;
	height: 100%;
	display: flex;
	box-sizing: border-box;
}
@media (max-width: 768px) {
	nav {
		z-index: 300;
		margin: 0;
		min-width: inherit;
		padding: 0;
		border: none;
	}
	nav .sp_menu {
		display: block;
		position: fixed;
		top: 0px;
		right: 0px;
		color: #fff;
		width: 50px;
		height: 50px;
		z-index: 9999;
		background: #007133;
		cursor: pointer;
		transition: 0.5s ease-in-out;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		border-radius: 0 0 0 5px;
		box-sizing: border-box;
		text-align: center;
		padding-top: 27px;
		font-family: "Noto Sans Japanese";
		font-size: 12px;
	}
	nav .sp_menu:before {
		content: "";
		position: absolute;
		top: 23px;
		left: 0;
		right: 0;
		margin: auto;
		background: #fff;
		height: 3px;
		width: 32px;
		box-shadow: inset 0px 0px 0px 0px #fff, 0px -8px #fff, 0 -16px #fff;
	}
	nav.open .sp_menu {
		right: 80%;
	}
	nav .sp_menu_bg {
		z-index: 99;
		display: none;
		top: 0;
		left: 0;
		position: fixed;
	}
	nav.open .sp_menu_bg {
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
	}
	nav > ul {
		position: fixed !important;
		z-index: 1000;
		display: block;
		/* font-size: 0.9em; */
		background-color: #007133;
		width: 80%;
		right: -80%;
		padding: 10px;
		list-style-type: none;
		transition: 0.5s ease-in-out;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		box-sizing: border-box;
		height: 100%;
		top: 0px;
		overflow: scroll;
	}
	nav > ul > li {
		border-bottom: dotted 2px rgba(255, 255, 255, .5);
	}
	nav.open > ul {
		right: 0px;
	}
	nav > ul .sp_login {
		position: relative;
		top: 0;
		display: flex;
		flex-direction: column;
		margin: 10px 0 0;
	}
	nav > ul .sp_login a {
		color: #52C7FE;
		background: #fff;
		margin: 5px 0 0;
		text-align: center;
	}
	nav > ul .sp_login a:before {
		content: none;
	}
	nav > ul .sp_login a:first-of-type:before {}
	nav > ul > li {
		/* float: none; */
		width: 100%;
		text-align: left;
		padding: 5px 0;
	}
	nav > ul > li:first-of-type {
		/* display: block; */
	}
	nav > ul > li.attention {
		display: block;
		color: #36b27c;
		border: solid 1px;
		background: #fff;
		padding: 5px 10px;
		margin: 5px;
		width: auto;
	}
	nav > ul > li.contact {
		display: block;
		color: #fff;
		border: none;
	}
	nav > ul > li.contact a[href^="tel:"] {
		position: relative;
		font-size: 34px;
		font-weight: 900;
		margin: 10px auto 0;
		/*pointer-events: none;*/
		padding: 22px 10px 5px;
		display: table;
	}
	nav > ul > li.contact a[href^="tel:"]:before {
		/*content: "\f095";
		font-family: FontAwesome;
		font-weight: normal;
		border: solid 3px;
		border-radius: 50%;
		font-size: 20px;*/
		content: "";
		background-image: url("../img/icn_tel.svg");
		display: inline-block;
		width: 32px;
		height: 32px;
		line-height: 28px;
		text-align: center;
		vertical-align: bottom;
		margin: 0 5px 0px 0;
	}
	nav > ul > li.contact a[href^="tel:"]:after {
		content: "葬儀のご相談お問い合わせはこちら";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		white-space: nowrap;
		font-size: 14px;
		font-weight: 500;
	}
	nav ul li a {
		color: #fff;
		display: flex;
		align-items: center;
	}
	nav ul li a:hover {}
	nav > ul > li > a.active {}
	nav > ul > li > a.active:before {
		content: none;
	}
	nav > ul > li > a.active.on:before {}
	nav > ul > li > a > img {
		margin: 0 10px 0 0;
	}
	nav > ul > li > a > span {
		display: inherit;
	}
	nav > ul > li > a:before {}
	nav > ul > li:hover > a {}
	nav > ul > li:hover > a:before {}
	nav > ul > li > ul {
		background: transparent;
		position: relative;
		visibility: visible;
		opacity: 1;
		top: 0;
		left: 0;
		padding: 0;
	}
	nav > ul > li > ul li {
		padding: 3px 0;
	}
	nav > ul > li > ul li a {
		color: #fff;
		padding: 5px 0 5px 20px; /* font-size: 14px; */ margin: 0 0 0 20px;
	}
	nav > ul > li > ul li a.active {
		background: rgba(255, 255, 255, .7);
		color: #52C7FE;
	}
	nav.fixed {}
	nav.fixed > ul {}
	nav.fixed > ul > li:first-of-type {}
	nav > ul > li:first-of-type a {
		/* background: transparent !important; */
		/* color: #fff !important; */
	}
	nav.fixed > ul > li:first-of-type:hover a {}
	nav.fixed > ul > li {}
	nav.fixed > ul > li a {}
	nav.fixed > ul > li > a:before {}
	nav.fixed > ul > li:hover > a, nav.fixed > ul > li:hover > a.active.on {}
	nav > ul > li > a.active {
		/* background: rgba(255, 255, 255, .7); */
		/* color: #52C7FE; */
	}
	nav > ul > li > a.active.on {
		background: transparent;
		color: #fff;
	}
	nav.fixed > ul > li:hover > a:before {}
	nav.fixed > ul > li > ul {
		background: transparent;
	}
	nav.fixed > ul > li > ul li {}
	nav.fixed > ul > li > ul li a {}
	nav.fixed > ul .sp_login {}
	nav.fixed > ul .sp_login a {
		display: block;
	}
}
/*//////////////////////////////////////
footer
//////////////////////////////////////*/
footer {
	background: #00586A;
	color: #fff;
	padding: 50px 0;
	/* display: flex; */
	/* justify-content: space-between; */
}
footer small {
	display: block;
	/* margin: 50px 0 0; */
	padding: 20px 0 0;
	text-align: center;
	font-size: 11px;
	/* border-top: solid 1px rgba(255,255,255,.5); */
	font-weight: 100;
}
.footer_menu {
	display: flex;
	font-size: 14px;
	font-weight: 200;
}
.footer_menu li {
	display: flex;
	justify-content: center;
	/* flex-direction: column; */
	/* margin-right: 70px; */
	flex: auto;
}
.footer_menu li a {
	color: #fff;
	display: inline-block;
	padding: 5px 20px;
}
.footer_contact {
	flex: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 50px 0;
	padding: 50px 0;
	font-size: 14px;
	line-height: 1.2;
	/* border-top: solid 1px rgba(255,255,255,.5); */
	background: #0F7C8F;
}
.footer_contact b {
	font-weight: normal;
}
.footer_contact strong {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 15px;
	margin: 0 0 0 15px;
}
.footer_contact a[href^="tel:"] {
	position: relative;
	font-size: 40px;
	font-weight: 900;
	margin: 40px 0 10px;
	pointer-events: none;
	color: #fff;
	line-height: 1;
}
.footer_contact a[href^="tel:"]:before {
	/*content: "\f095";
	font-family: FontAwesome;
	font-weight: normal;
	border: solid 3px;
	border-radius: 50%;
	font-size: 20px;
	display: inline-block;*/
	content: "";
		background-image: url("../img/icn_tel.svg");
		display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 28px;
	text-align: center;
	vertical-align: bottom;
	margin: 0 5px 2px 0;
}
.footer_contact a[href^="tel:"]:after {
	content: "葬儀のご相談お問い合わせはこちら";
	position: absolute;
	top: -18px;
	right: 0;
	left: 0;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
a.page_top {
	transition: 1s;
	position: fixed;
	right: 10px;
	bottom: 10px;
	display: block;
	text-indent: -9999px;
	border: 6px #ccc solid;
	border-radius: 50px;
	width: 65px;
	height: 65px;
	float: right;
	box-sizing: border-box;
	visibility: hidden;
	opacity: 0;
	z-index: 5555;
}
a.page_top:before {
	content: '';
	height: 0;
	width: 0;
	display: block;
	border: 12px transparent solid;
	border-bottom-color: #ccc;
	position: absolute;
	top: 0px;
	left: 15px;
	border-radius: 3px;
}
a.page_top:after {
	content: '';
	height: 20px;
	width: 10px;
	display: block;
	background: #ccc;
	position: absolute;
	top: 21px;
	left: 22px;
	border-radius: 2px;
}
a.page_top.fixed {
	visibility: visible;
	opacity: 1;
}
a.page_top.fixed:hover {
	opacity: 0.5;
}
@media (max-width: 768px) {
	footer {
		padding: 40px 0;
	}
	footer small {
		text-align: center;
		font-size: 10px;
		padding: 20px 20px 0;
	}
	.footer_menu {
		/* flex-direction: column; */
		/* font-size: 13px; */
	}
	.footer_menu li {
		margin: 0;
		flex-wrap: wrap;
	}
	.footer_menu li br {
		/* display: none; */
	}
	.footer_menu li a {
		display: inline-block;
		/* margin-bottom: 5px; */
		position: relative;
		padding: 0 10px 0;
	}
	.footer_contact {
		width: 100%;
		/* align-items: center; */
		text-align: center;
		margin: 40px 0;
		padding: 40px 20px;
	}
	.footer_contact b {}
	.footer_contact strong {}
	.footer_contact a[href*="tel:"] {pointer-events: auto;}
	.footer_contact a[href^="tel:"]:before {}
	.footer_contact a[href^="tel:"]:after {}
	a.page_top {
		border-radius: 50px;
		width: 46px;
		height: 46px;
	}
	a.page_top:before {
		border: 14px transparent solid;
		border-bottom-color: #ccc;
		left: 3px;
		top: -10px;
		border-radius: 3px;
	}
	a.page_top:after {
		height: 15px;
		width: 13px;
		top: 13px;
		left: 11px;
		border-radius: 2px;
	}
	a.page_top.fixed {}
	a.page_top.fixed:hover {}
}
/*//////////////////////////////////////
全体要素
//////////////////////////////////////*/
#container {
	/* min-height: calc(100vh - 434px); */
	padding: 20px calc(50% - 500px) 100px;
	background: url(../img/bg_bottom.svg) no-repeat right bottom;
	background-size: 532px;
}
.cnt {
	padding: 50px calc(50% - 400px);
	position: relative;
	background: #F7F8D8;
}
.cnt:first-of-type {
	background: url(../img/bg_cnt.svg) no-repeat left top/83px, #F7F8D8;
	padding-top: 100px;
}
.cnt:last-of-type {
	padding-bottom: 100px;
}
.ttl {
	background: #EFECE3;
	border-top: solid 96px;
	padding: 100px 0 60px;
	text-align: center;
	margin-bottom: 30px;
}
.ttl strong {
	display: block;
	font-size: 32px;
}
.ttl b {
	display: block;
	font-size: 18px;
}
@media (max-width: 768px) {
	#container {
		min-height: calc(100vh - 338px);
		background-size: 177px;
	}
	.cnt {
		padding: 50px 20px;
	}
	.cnt:first-of-type {
		background: url(../img/bg_cnt.svg) no-repeat left top/40px, #F7F8D8;
	}
	.ttl {
		border-top: solid 60px;
		padding: 30px 0 30px;
	}
	.ttl strong {}
	.ttl b {}
}