@charset "utf-8";
@import url("./style.86e33f465b93.css?v=2");

/*--------------------------------------------

	基本設定

--------------------------------------------*/
html {
	font-size: calc((100vw - 320px) / 140 + 10px);
}
p{word-break: break-all;}
@media (min-width: 600px) {
	html {
		font-size: calc((100vw - 320px) / 140 + 8px);
	}
}

body {
	background-color: #66c6c9;
	color: #555;
	font-family: "Noto Serif JP", serif;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 2;
	margin: 0;
	text-align: left;
}

section {
	background-color: #66c6c9;
	color: #fff;
	padding: 0;
}

/* font-family */
.font-maru {
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", "M PLUS Rounded 1c";
}

main {
	background-color: #66c6c9;
	color: #fff;
}
@media (min-width: 950px) {
	main {
		padding-bottom: 2rem;
	}
}

/*コンテンツ
 ------------------------------------------ */
.container {
	margin: 0 auto;
	padding: 0 1rem;
}

.card {
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0px .8rem 1.3rem -.8rem rgba(0, 0, 0, .6);
	color: #555;
	margin-bottom: 2rem;
	padding: 2rem;
}

@media (min-width: 600px) {
	.container, .prof, .bottom_contents {
		max-width: 1400px;
	}

	.container {
		padding: 0 2rem;
	}

	.pc-card {
		background-color: #fff !important;
		border-radius: 1rem;
		box-shadow: 0px .8rem 1.3rem -.8rem rgba(0, 0, 0, .6);
		color: #555;
		margin-bottom: 2rem;
		padding: 2rem !important;
	}
}


/* メニューナビ
 ------------------------------------------ */
.menu-nav {
	align-items: center;
	display: flex;
}

.menu-nav li {
	min-width: 12rem;
	text-align: center;
}
/*--------------------------------------------

	ヘッダーエリア

--------------------------------------------*/
header {
	background-color: #66c6c9;
	color: #fff;
}

.header-content {
	align-items: center;
	background-color: #66c6c9;
	color: #fff;
	display: flex;
	justify-content: space-between;
	position: relative;
}

.header-content h1 {
	font-size: 1.8rem;
	font-weight: bolder;
	line-height: 4.4rem;
	margin-right: auto;
}
.header-content h1 img{
	max-width: 60%;
}
.hc__a__btn {
	display: block;
	height: 2.5rem;
	position: relative;
	width: 2.5rem;
}

.hc__a__btn span {
	background-color: #a03961;
	border-radius: 100%;
	color: white;
	display: block;
	font-size: 1.2rem;
	height: 2rem;
	line-height: 2rem;
	position: absolute;
	right: -.8rem;
	text-align: center;
	top: -.5rem;
	width: 2rem;
}

.hc__a__btn::before {
	color: #fff;
	content: "\e901";
	font-family: "icomoon";
	font-size: 2.5rem;
	height: 2.5rem;
	line-height: 2.5rem;
	width: 2.5rem;
}

/* ハンバーガーメニュー
----------------------------------------------*/
.header-content__menu {
	align-items: center;
	display: flex;
	justify-content: center;
	width: 4.4rem;
}

.header-content__menu__humberger {
	align-items: center;
	display: block;
	height: 4.4rem;
	position: relative;
	width: 4.4rem;
}

.content__menu__close {
	align-items: center;
	display: block;
	height: 4.4rem;
	position: relative;
	width: 4.4rem;
}

.header-content__menu__humberger span, .header-content__menu__humberger span:before, .header-content__menu__humberger span:after, .header-content__menu__close span, .header-content__menu__close span:before, .header-content__menu__close span:after {
	background-color: #fff;
	border-radius: .3rem;
	content: "";
	display: block;
	height: .3rem;
	position: absolute;
	right: 0;
	width: 2.5rem;
}

.header-content__menu__close span, .header-content__menu__close span:before, .header-content__menu__close span:after {
	right: .5rem;
}

.header-content__menu__close span, .header-content__menu__humberger span {
	top: 2rem;
}

.header-content__menu__humberger span:before {
	bottom: .8rem;
}

.header-content__menu__humberger span:after {
	top: .8rem;
}

.header-content__menu__checkbox {
	display: none;
}

/* .header-content__menu__checkbox:checked ~ .header-content__menu__humberger span , */
.header-content__menu__close span {
	background-color: rgba(255, 255, 255, 0);
}

/* .header-content__menu__checkbox:checked ~ .header-content__menu__humberger span::before , */
.header-content__menu__close span::before {
	bottom: 0;
	transform: rotate(45deg);
}

/* .header-content__menu__checkbox:checked ~ .header-content__menu__humberger span::after , */
.header-content__menu__close span::after {
	top: 0;
	transform: rotate(-45deg);
}

.header-content__menu .header-content__menu__nav {
	background-color: #00aab4;
	bottom: 0;
	height: 100%;
	overflow-y: auto;
	position: fixed;
	right: -100%;
	top: 0;
	transition: all .5s;
	width: 100%;
	z-index: 101;
}

.header-content__menu_ov {
	background-color: rgb(0, 0, 0, .6);
	display: none;
	height: 100%;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	transition: all .5s;
	width: 100%;
	z-index: 100;
}

.header-content__menu nav {
	padding: 4rem 1rem 4rem;
}

.header-content__menu__title {
	background-color: #007f82;
	border-bottom: solid .1rem #fff;
	color: #fff;
	margin: 0;
	padding: 1rem 1rem;
}
footer nav ul li, .header-content__menu nav ul li {
	border-bottom: solid .1rem #fff;
	list-style: none;
	padding-left: 1rem;
}
footer nav ul li a, .header-content__menu nav ul li a {
	box-sizing: border-box;
	color: #fff;
	display: block;
	font-size: 1.5rem;
	padding: .9rem 1.5rem 1rem 0;
	position: relative;
	text-decoration: none;
	width: 100%;
}
footer nav ul li a::before, .header-content__menu nav ul li a::before {
	border-right: solid .2rem #fff;
	border-top: solid .2rem #fff;
	content: "";
	height: .7rem;
	position: absolute;
	right: 1.1rem;
	top: 1.6rem;
	transform: rotate(45deg);
	width: .7rem;
}

.header-content__menu__checkbox:checked ~ .header-content__menu__nav {
	right: 0;
}

.header-content__menu__checkbox:checked ~ .header-content__menu_ov {
	display: block;
	transition: all .5s;
}

@media (min-width: 600px) {
	.header-content__menu .header-content__menu__nav {
		right: -50%;
		width: 50%;
	}
}


/* ------------------------------------------

メッセージ投稿

 --------------------------------------------*/
#overlay {
	background: rgba(0, 0, 0, .6);
	height: 100vh;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: all .5s ease-out;
	visibility: hidden;
	width: 100vw;
	z-index: 9;
}

#overlay.overlay-on {
	opacity: 1;
	visibility: visible;
}

.post_message {
	background-color: #eee;
	bottom: -10rem;
	position: fixed;
	transition: all 750ms;
	width: 100%;
	z-index: 10;
}

.post_message.scroll_in {
	bottom: 0;
}

.post_message__form {
	margin: auto;
	max-width: 900px;
	padding: .5rem 2rem;
	width: 100%;
}

.post_message__message textarea {
	height: 3em;
}

.post_message__submit, .post_message__count, .post_message__name {
	display: none;
}

.post_message__close {
	background-color: #ccc;
	display: none;
	line-height: 1.4;
	text-align: center;
}

/* ------------------------------------------

Form

--------------------------------------------*/
form {
	color: #555;
}

form button {
	margin: 1rem 0;
}

form input[type="text"], form textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #ccc;
	border-radius: 2rem;
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.4;
	margin: 1rem 0;
	padding: 1rem 2rem;
	width: 100%;
}

form input[type="text"]::placeholder, form textarea::placeholder {
	color: #555;
}

form input[type="text"]:focus, form textarea:focus {
	background-color: #fff;
	outline: none;
}

form input[type="text"]:focus::placeholder, form textarea:focus::placeholder {
	color: #ccc;
}


/* ------------------------------------------

フッター

--------------------------------------------*/
footer {
	background-color: #57a9ac;
	color: #fff;
	padding: 0;
}

.cta_area {
	background-color: #fff;
	color: #555;
	padding: 2rem 0;
}

.copyright {
	padding: 2rem 0 10rem 0;
	text-align: center;
}

/*--------------------------------------------

    共通部品

---------------------------------------------*/
/* アラートメッセージ
 ------------------------------------------ */
.alert-messages {
	align-items: center;
	color: black;
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.6rem;
	opacity: 1;
	padding: .8rem;
	transition: opacity .6s;
}

.alert-messages--success {
	background-color: #d8ffe2;
}

.alert-messages--error {
	background-color: #e4606d;
}

.alert-close-btn {
	color: black;
	cursor: pointer;
	transition: .3s;
}

.form-error li {
	color: red;
}

/* ナビゲーションボタン 
---------------------------------------------*/
.navigation {
	padding: 2rem 0 0 0;
	width: 100%;
}

.bottom_contents.reverse .navigation {
	padding: 0;
}

.navigation .btn {
	font-size: 2.0rem;
	width: 100%;
}

.navigation .btn-arrow-right {
	padding-right: 3rem;
}

@media (min-width: 950px) {
	.navigation .btn {
		font-size: 1.6rem;
	}

	.navigation .btn small {
		font-size: 1rem;
	}

	.navigation ul {
		display: flex;
		flex-wrap: wrap;
	}

	.navigation li {
		margin-left: 1rem;
		margin-right: 0;
		width: calc(50% - 1rem);
	}

	.navigation li:nth-child(odd) {
		margin-left: 0px;
		margin-right: 1rem;
	}
}

/*------------------------------------------
ボトムコンテンツ 
-------------------------------------------*/
.bottom_contents {
	display: flex;
	flex-wrap: wrap;
	margin-left: 1rem;
	margin-right: 1rem;
	/* margin-bottom: 2rem; */
}

@media (min-width: 950px) {
	.bottom_contents {
		margin-left: auto;
		margin-right: auto;
	}
}

.bottom_contents.reverse {
	flex-direction: column-reverse;
}

.bottom_contents section {
	width: 100%;
}

/* 動画
-------------------------------------------- */
.movies {
	width: 100%;
}

.movies article h4 {
	font-size: 2rem;
	line-height: 1.4;
	margin: 0 0 2rem 0;
	padding: 0;
}

.movies article video {
	width: 100%;
}

/* プログレスバー
 ------------------------------------------ */
.status {
	height: 0;
	margin-bottom: 1rem;
	opacity: 0;
	overflow: hidden;
	position: relative;;
}
.status.active {
	height: 3rem;
	opacity: 1;
}
.status progress {
	-webkit-appearance: none;
	height: 3rem;
	left: 0;
	position: absolute;
	top: 0;
}
.progress-value {
	background-color: #3da9ac;
	color: #fff;
	left: 0;
	line-height: 3rem;
	min-width: 3rem;
	padding-right: 1rem;
	position: absolute;
	text-align: right;
	top: 0;
	z-index: 2;
}
.progress-bar::-webkit-progress-value {
	background-color: #3da9ac;
}

.progress-bar::-webkit-progress-bar {
	background-color: gray;
}

.progress-bar::-moz-progress-bar {
	background-color: #3da9ac;
}
.status progress::-ms-fill {
	border-radius: 100%;
}


/* メッセージ
-------------------------------------------- */
.messages {
	background-color: #3da9ac;
	margin-left: -1rem;
	margin-right: -1rem;
	padding: 2rem 1rem;
	width: calc(100%+2rem);
}

.bottom_contents.reverse .messages {
	margin-bottom: 2rem;
}

.messages h3 {
	border-bottom: .1rem solid rgba(255, 255, 255, .8);
	color: #fff;
	font-size: 2.4rem;
	line-height: 1.4;
	margin: 2rem 0 2rem 0;
	padding: 0 0 1rem 0;
}



.messages h3 i {
	margin-right: 1rem;
}

.messages article {
	font-size: 1.4rem;
	margin: 0;
}

.message__name {
	margin-bottom: .5rem;
	padding: 0;
}

.message__body {
	background-color: #fff;
	border-radius: 1rem;
	color: #555;
	cursor: pointer;
	margin-bottom: .5rem;
	margin-left: 4rem;
	padding: 1rem;
	position: relative;
}

.message__body:after {
	border: 1rem solid transparent;
	border-right: 3rem solid #fff;
	content: "";
	display: inline-block;
	left: -3rem;
	position: absolute;
	top: 3px;
	-webkit-transform: rotate(35deg);
	transform: rotate(35deg);
}

.message__body__short {
	display: block;
}

.message__body__short__more {
	color: #00aab4;
	text-decoration: underline;
}

.message__body__full {
	display: none;
}

.message__time {
	margin: 0;
	padding: 0;
	text-align: right;
}


@media (min-width: 950px) {
	.messages {
		background-color: #fff;
		border-radius: 1rem;
		color: #555;
	}

	.bottom_contents.reverse {
		flex-direction: row-reverse;
	}

	.bottom_contents section {
		width: 50%;
	}

	.movies, .messages, .navigation {
		margin-left: 1rem;
		margin-right: 1rem;
		width: calc(100% - 2rem);
	}

	.messages h3 {
		color: #57a9ac;
		font-size: 2.2rem;
		line-height: 1.4;
		margin: 0 0 2rem 0;
		padding: 0;
	}

	.message__body {
		background-color: #eee;
	}

	.message__body:after {
		border-right-color: #eee;
	}
}

/* メッセージ個別ページ
----------------------------- */
.messages.sub_content {
	background-color: #66c6c9;
	text-align: center;
}

.messages.sub_content article {
	text-align: left;
}

@media (min-width: 950px) {
	.messages.sub_content .container {
		background-color: #fff;
		max-width: 950px;
		padding: 2rem 5rem;
	}

	.messages.sub_content article p {
		font-size: 1.2rem;
	}
}

/*--------------------------------------------

	hero

--------------------------------------------*/
/* TOPページ
--------------------------------------------*/
.hero {
	background-color: #00aab4;
	color: #fff;
	height: 48rem;
}

.hero__profile_image {
	height: 48rem;
	margin: 0;
	width: 100%;
}

.hero__profile_image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}


.prof__title {
	background-color: #66c6c9;
	border-radius: 1rem 1rem 0 0;
	color: #fff;
	height: 100%;
	line-height: 1.5;
	margin: 0 auto;
	padding: 1rem;
	text-align: center;
	width: calc(100% - 2rem);
}

.prof__description {
	background-color: #fff;
	border-radius: 0 1rem 1rem;
	color: #555;
	margin: 0 auto;
	padding: 1.5rem 2rem 2rem 2rem;
	width: calc(100% - 2rem);
}

.prof__title h2 {
	font-size: 2.4rem;
}

.prof__title h3 {
	font-size: 1.8rem;
}

.prof__description {
	background-color: #fff;
	border-radius: 0 0 1rem 1rem;
	color: #555;
	padding: 1.5rem 2rem 2rem 2rem;
	z-index: 100;
}

.prof__description {
	box-shadow: 0px .8rem 1.3rem -.8rem rgba(0, 0, 0, .6);
	display: flex;
	flex-wrap: wrap;
	line-height: 1.4;
}

.prof__description dt, .prof__description dd {
	border-bottom: .1rem solid #eee;
	padding: .5rem 0;
}

.prof__description dt {
	font-weight: lighter;
	width: 7rem;
}

.prof__description dd {
	width: calc(100% - 7rem);
}


@media (min-width: 600px) {
	.hero {
		background-color: #00aab4;
		height: calc(45vw + 3.4rem);
		margin: 0 auto;
		padding-bottom: 0px;
		position: relative;
	}

	.hero__slider {
		max-width: 100vw;
		padding-top: 3.4rem;
	}

	.hero__slider__ul {
		height: 45vw;
	}

	.hero__slider li {
		height: 45vw;
		margin: 0;
		width: 100%;
	}

	.hero__slider li img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.prof {
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		width: calc(100%);
	}


	.prof__title {
		background-color: #00aab4;
		border-radius: 0;
		height: 3.4rem;
		line-height: 3.4rem;
		margin-bottom: 2rem;
		overflow: hidden;
		padding: 0;
		width: calc(100%);
	}

	.prof__title h2 {
		display: inline;
		font-size: 2.4rem;
		padding-right: 2rem;
	}

	.prof__title h3 {
		display: inline;
		font-size: 2.4rem;
		padding-left: 2rem;
	}

	.prof_image {
		height: 22vw;
		margin: 0 auto;
		max-height: 400px;
		max-width: 400px;
		width: 22vw;
	}

	.prof_image img {
		border: 5px solid #fff;
		border-radius: 100%;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}


	.prof__description {
		border-radius: 1rem;
		width: 60%;
	}
}

/* 下層ページ
----------------------------------*/
.prof.sub_page {
	max-width: 100%;
}

.prof.sub_page .prof__title {
	background-color: #00aab4;
	border-radius: 0;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	width: 100%;
}

.prof.sub_page .prof_image {
	height: 20vw;
	margin: 0 auto;
	width: 20vw;
}

.prof.sub_page .prof__title__text {
	padding-left: 1rem;
	padding-right: 2.5rem;
	text-align: left;
	width: 70vw;
}
.prof.sub_page .prof__title__text h3 {
	font-size: 1.6rem;
}

.prof.sub_page .prof_image img {
	border: 3px solid #fff;
	border-radius: 100%;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.prof.sub_page .prof__description {
	border-radius: 1rem;
	display: none;
	margin-top: 1rem;
}

.prof.sub_page.active .prof__description {
	display: flex;
}

.prof.sub_page .prof__title__btn {
	bottom: 0;
	display: block;
	height: 2.5rem;
	margin: auto 0;
	position: absolute;
	right: 1rem;
	top: 0;
	width: 2.5rem;
}

.prof.sub_page .prof__title__btn::before {
	color: #fff;
	content: "\ea0a";
	font-family: "icomoon";
	font-size: 2.5rem;
	height: 2.5rem;
	line-height: 2.5rem;
	width: 2.5rem;
}

.prof.sub_page.active .prof__title__btn::before {
	content: "\ea0b";
}

@media (min-width: 600px) {
	.prof.sub_page .prof__title__btn {
		right: 2rem;
	}

	.prof.sub_page .prof__title__text {
		text-align: center;
		width: 100vw;
	}

	.prof.sub_page .prof_image.pc {
		display: none;
	}

	.prof.sub_page.active .prof_image.pc {
		display: block;
	}
}

/*--------------------------------------------

	下層ページ

--------------------------------------------*/
.main_block {
	margin-bottom: 4rem;
	text-align: center;
}

.messages.sub_content h3, .main_block h3 {
	align-items: center;
	border-bottom: 2px solid #fff;
	display: inline-block;
	font-size: 3rem;
	margin: 3.4rem auto;
	text-align: center;
}

.main_block article {
	background-color: #fff;
	border-radius: 1rem;
	color: #555;
	margin-bottom: 3rem;
	padding: 2rem;
	text-align: left;
}

/* 喪主挨拶
----------------------------------*/
.main_block.message_section article {
	border-radius: 0;
	margin-left: auto;
	margin-right: auto;
	max-width: 900px;
	padding-bottom: 2.5em;
	padding-top: 2.5em;
}

.note p {
	background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);

/* 行の高さ */
	background-size: 100% 2.5em;
	line-height: calc(2.5em);
	line-height: calc(2.5em);
	margin: 0;
	padding: 0 0 2.5em 0;

/* 最終行の下にも罫線を引く */
	padding-bottom: 1px;
}

/*--------------------------------------------

	喪主様ページ

--------------------------------------------*/
/* タイトルエリア
------------------------------------------- */
.admin_title {
	background-color: #00aab4;
	padding-bottom: 1rem;
	padding-top: 1rem;
}

.admin_title .container {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.admin_title__icon {
	background-color: #fff;
	border-radius: 100%;
	color: #00aab4;
	display: block;
	font-size: 3.6rem;
	height: 6rem;
	line-height: 6rem;
	text-align: center;
	width: 6rem;
}

.admin_title__text {
	padding-left: 2rem;
}

.admin_title__text h2 {
	font-size: 1.6rem;
	line-height: 1.4;
}

.admin_title__text h3 {
	font-size: 2.rem;
	line-height: 1.4;
}

/* コンテンツ
------------------------------------------ */
.edit_main_block .container {
	max-width: 950px;
}

.edit_main_block article {
	margin: 2rem 0;
}

.edit_main_block h3 {
	background-color: #00aab4;
	display: inline-block;
	font-size: 2.rem;
	line-height: 1;
	padding: 1rem;
}

.edit_main_block__body {
	background: #fff;
	color: #555;
	padding: 1rem;
}

@media (min-width: 600px) {
	.edit_main_block__body {
		padding: 2rem;
	}
}

/* dl_table
------------------------------------------ */
.edit_main_block__body__table dt, .edit_main_block__body__table dd {
	margin: 0;
	padding: 0;
}

.edit_main_block__body__table {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.edit_main_block__body__table dt, .edit_main_block__body__table dd {
	box-sizing: border-box;
	padding: 1rem;
}

.edit_main_block__body__table dt {
	background-color: #95b0b1;
	color: #fff;
	width: 100%;
}

.edit_main_block__body__table dd {
	background-color: #eee;
	width: 100%;
}

@media (min-width: 600px) {
	.edit_main_block__body__table dt, .edit_main_block__body__table dd {
		border-bottom: 1px solid #fff;
	}

	.edit_main_block__body__table dt {
		width: 15rem;
	}

	.edit_main_block__body__table dd {
		width: calc(100% - 15rem);
	}
}

/* Form
------------------------------------------ */
.form input[type="text"], .form input, .form textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #eee;
	border-radius: 1rem;
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.4;
	margin: 1rem 0;
	padding: 1rem;
	width: 100%;
}

.form input:focus, .form textarea:focus {
	background-color: #ccc !important;
	outline: none;
}

.form input:focus::placeholder, .form textarea:focus::placeholder {
	color: #999;
}

/* 写真アップロード
----------------------------------------------- */
.imageframe {
	align-items: center;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px dashed #eee;
	display: flex;
	height: 60vw;
	max-height: 400px;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.imageframe.no_image {
	background: none;
}

.imageframe__description {
	width: 100%;
	z-index: 1;
}

.imageframe__description p {
	display: none;
	margin: 0;
}

.imageframe.no_image p {
	display: block;
}

.imageframe__description .btn {
	margin-bottom: 0 !important;
}

.imageframe.no_image:before {
	bottom: 0;
	color: #eee;
	content: "\ea0a";
	display: block;
	font-family: "icomoon";
	font-size: 10rem;
	left: 0;
	line-height: 10rem;
	margin: auto;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}

/* 写真並べ替え
-------------------------------------- */
.upload_photos {
	list-style: none;
	margin-left: 1.5rem;
}

.upload_photos__li {
	align-items: center;
	background-color: #00aab4;
	border-radius: 1rem;
	box-shadow: 0px .5rem 0px 0px #007f82;
	color: #fff;
	display: flex;
	margin-bottom: 2rem;
	padding: .6rem;
}

.upload_photos__li__icon {
	font-size: 3rem;
	line-height: 1;
	width: 10%;
}

.upload_photos__li__icon i {
	display: inline-block;
	transform: rotate(90deg) !important;
}

.upload_photos__li a {
	align-items: center;
	display: flex;
	width: 76%;
}

.upload_photos__li__delck {
	padding-left: 1rem;
	text-align: right;
	width: 14%;
}

.upload_photos__li__image_wrap {
	height: 5rem;
	width: 5rem;
}


.upload_photos__li__image_wrap img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.upload_photos__li__name {
	line-height: 1.6;
	padding-left: 1rem;
	width: calc(100% - 5rem);
}

/* チェックボックスのデザイン 
----------------------------------------*/
.upload_photos__li__delck input[type=checkbox] {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	display: block;
	margin: 0 auto;
	outline: none;
	padding-top: 100%;
	position: relative;
	text-align: center;
	width: 100%;
}

.upload_photos__li__delck input[type="checkbox"]::before {
	background: #fff;
	background-color: #00aab4;
	border: solid .2rem #fff;
	bottom: 0;
	content: "";
	display: block;
	height: 2.8rem;
	margin: auto;
	position: absolute;
	top: 0;
	width: 2.8rem;
}

.upload_photos__li__delck input[type="checkbox"]:checked::before {
	background-color: #007f82;
}

.upload_photos__li__delck input[type="checkbox"]::after {
	border-bottom: .3rem solid #fff;
	border-right: .3rem solid #fff;
	bottom: 0;
	content: "";
	display: block;
	height: 1.6rem;
	left: 1rem;
	margin: auto;
	opacity: 0;
	position: absolute;
	top: .5rem;
	top: 0;
	transform: rotate(45deg);
	width: .8rem;
}

.upload_photos__li__delck input[type="checkbox"]:checked::after {
	opacity: 1;
}

/* LightBox2
-------------------------------------- */
.lb-nav a.lb-next, .lb-nav a.lb-prev {
	filter: alpha(Opacity=1) !important;
	opacity: 1 !important;
}

.lb-nav a.lb-next {
	right: 20px !important;
}

/* メッセージ一覧
--------------------------------------- */
.condolence_block .container {
	max-width: calc(1400px + 2rem);
}

ul.condolence_list {
	width: 100%;
}

ul.condolence_list li {
	margin: 0;
	padding: 0;
}

ul.condolence_list li a {
	align-items: stretch;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
.condolence_list__not-read {
	background-color: rgb(46, 158, 161,.8);
	color: #fff;
	display: inline-block;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.4rem;
	font-weight: lighter;
	line-height: 1;
	padding: .5rem 1rem;
	position: absolute;
	right: 0;
	top: 0;
}

ul.condolence_list li.bold h4, ul.condolence_list li.bold h5, ul.condolence_list li.bold p {
	font-weight: bolder;
}

ul.condolence_list li h4, ul.condolence_list li h5, ul.condolence_list li p {
	box-sizing: border-box;
	font-size: 1.4rem;
	padding: .6rem 1rem;
	word-break: break-all;
}

ul.condolence_list li:nth-child(odd) h4, ul.condolence_list li:nth-child(odd) h5, ul.condolence_list li:nth-child(odd) p {
	background-color: #eee;
}

ul.condolence_list li:nth-child(even) h4, ul.condolence_list li:nth-child(even) h5, ul.condolence_list li:nth-child(even) p {
	background-color: #e6f4f1;
}

ul.condolence_list li h4 {
	padding-bottom: 0;
	width: 45%;
}

ul.condolence_list li h5 {
	padding-bottom: 0;
	width: 55%;
}

ul.condolence_list li p {
	margin: 0;
	padding-top: 0;
	width: 100%;
}

ul.condolence_list li a:hover h4, ul.condolence_list li a:hover h5, ul.condolence_list li a:hover p {
	background-color: rgb(102, 198, 201, .6);
}


@media (min-width: 600px) {
	ul.condolence_list li h4, ul.condolence_list li h5, ul.condolence_list li p {
		font-size: 1.1rem;
	}

	ul.condolence_list li h4 {
		padding-bottom: .6rem;
		width: 27%;
	}

	ul.condolence_list li h5 {
		padding-bottom: .6rem;
		width: 20%;
	}

	ul.condolence_list li p {
		padding-top: .6rem;
		width: 53%;
	}
}

/* メッセージ詳細
--------------------------------------- */
.message_detail {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.message_detail dt, .message_detail dd {
	background-color: #eee;
	border-top: 1px solid #ccc;
	padding: .1rem 1rem;
}

.message_detail dt {
	border-left: 1px solid #ccc;
	width: 30%;
}

.message_detail dd {
	border-right: 1px solid #ccc;
	width: 70%;
}

.message_detail dd.message_detail__body {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;

/* margin-top: 1rem; */
	border-top: 1px solid #ccc;
	padding: 2rem;
	width: 100%;
	word-wrap: break-word;
}

@media (min-width: 600px) {
	.message_detail {
		font-size: 1.5rem;
	}
}

/* pager
--------------------------------------- */
.pager .pagination {
	border-radius: 100vh;
	box-shadow: 0 .3rem 0 0 rgb(149, 176, 177, 1);
	color: #95b0b1;
	display: flex;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.2rem;
	font-size: 1.8rem;

/* flex-wrap: wrap; */
	justify-content: space-between;
	line-height: 1.3;
	margin: 2rem 0;
	text-align: center;
	width: 100%;
}

.pager .pagination li {
	background-color: #e6f4f1;
	border-right: 1px solid rgb(149, 176, 177, .4);
	position: relative;
	width: 100%;
}

.pager .pagination li.active {
	background-color: rgb(230, 244, 241, .4);
	color: rgb(149, 176, 177, .4);
}

.pager .pagination li:last-child {
	border-bottom-right-radius: 100vh;
	border-right: none;
	border-top-right-radius: 100vh;
}

.pager .pagination li:first-child {
	border-bottom-left-radius: 100vh;
	border-left: none;
	border-top-left-radius: 100vh;
}

.pager .pagination li.pre {
	width: 200%;
}

.pager .pagination li.next {
	width: 200%;
}

.pager .pagination li.next:after {
	border-right: .3rem solid rgb(149, 176, 177, .6);
	border-top: .3rem solid rgb(149, 176, 177, .6);
	bottom: 0;
	content: "";
	height: 1rem;
	margin: auto;
	position: absolute;
	right: 1.8rem;
	top: 0;
	transform: rotate(45deg);
	width: 1rem;
}

.pager .pagination li.pre:after {
	border-right: .3rem solid rgb(149, 176, 177, .6);
	border-top: .3rem solid rgb(149, 176, 177, .6);
	bottom: 0;
	content: "";
	height: 1rem;
	left: 1.8rem;
	margin: auto;
	position: absolute;
	top: 0;
	transform: rotate(-135deg);
	width: 1rem;
}

.pager .pagination li span, .pager .pagination li a {
	display: block;
	padding: 1rem 0;
	text-align: center;
	width: 100%;
}

.pager .pagination li.pre a {
	padding-left: 3.2rem;
	text-align: left;
}

.pager .pagination li.next a {
	padding-right: 3.2rem;
	text-align: right;
}

@media (min-width: 600px) {
	.pager .pagination {
		font-size: 1rem;
	}
}

/* 故人様のアルバム
------------------------------------------ */


.album__article_wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	margin-top: 1rem;
	width: 100%;
}

.main_block.album article {
	box-shadow: 0 .3rem 0 0 #57a9ac;
	padding: 0;
	width: 100%;
}

.main_block.album article a {
	display: block;
}

.main_block.album article:hover {
	opacity: .6;
}

.main_block.album article h4 {
	line-height: 1.4;
	padding: .5rem 1.5rem;
}

.album__img_wrapper {
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	height: 23rem;
	width: 100%;
}

.album__img_wrapper img {
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.lb-data .lb-caption {
	/* position: relative; */
	font-size: 2rem;
	/* padding:1rem; */
	/* margin-top: -5rem; */
	/* display: block; */
	/* z-index: 10001; */
	/* background-color: rgb(0, 0, 0, .6); */
}
@media (min-width: 600px) {
	.album__img_wrapper {
		height: 21rem;
	}

	.album__article_wrapper {
		margin-left: -2rem;
		margin-right: -2rem;
		width: calc(100% + 4rem);
	}

	.main_block.album article {
		margin: 1rem;
		width: calc(50% - 2rem);
	}

	.main_block.album article h4 {
		font-size: 1.6rem;
	}
}

@media (min-width: 950px) {
	.album__img_wrapper {
		height: 17rem;
		max-height: 250px;
	}

	.main_block.album article {
		margin: 1rem;
		width: calc(33.333% - 2rem);
	}
}

/* ----------------------------------------

ログインページ 

------------------------------------------- */
#login {
	background-attachment: fixed;
	background-color: #fff;
	background-image: url("../images/login_header_bg_sp.71da5a3a1ad9.jpg");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: cover;
	color: #555;
	height: 100vh;
}

#login main, #login section, #login footer {
	background-color: rgba(255, 255, 255, 0);
	color: #555;
}

#login main {
	margin: auto;
	max-width: 700px;
	padding: 2rem 0;
}

/* タイトルエリア
------------------------------------------- */
.title_area {
	padding: 2rem 0;
	text-align: center;
}
.title_area_catch_1, .title_area_catch_2, .title_area_catch_3, .title_area h1 {
	line-height: 1;
	margin: 0;
	padding: 0 0 1.3rem 0;
}
.title_area_catch_1 {
	font-size: 1.8rem;
}

.title_area_catch_2 {
	font-size: 2.4rem;
}

.title_area h1 {
	color: #6ed5d8;
	font-size: 3em;
}

.title_area_catch_3 {
	font-size: 1.8rem;
	margin: 0;
	padding: 0 0 1rem 0;
}

/* loginform
-------------------------------------------- */
.login_form {
	font-family: "Noto Sans JP", sans-serif;
	min-height: 300px;
}
.login_form__tabs {
	display: flex;
}
.login_form form {
	padding: 0 1rem;
}
.form__group {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
}
.form__group label {
	align-items: center;
	background-color: #e6f4f1;
	border-bottom-left-radius: 1rem;
	border-top-left-radius: 1rem ;
	color: #007f82;
	display: block;
	line-height: 2.5;
	text-align: center;
	width: 35%;
}
.form__group__input {
	position: relative;
	width: 65%;
}

.form__group__input input {
	background-color: #fff !important;
	border-bottom-left-radius: 0  !important;
	border-top-left-radius: 0  !important;
	margin: 0 !important;
}

.login_form__tabs li a {
	background-color: #1d884c;
	border-top-left-radius: 1rem ;
	border-top-right-radius: 1rem;
	color: #fff;
	display: block;
	margin-right: 1rem;
	padding: .4rem 1.6rem;
}
.login_form__tabs li.active a {
	background-color: #6ed5d8;
}

.login_form__panels {
	background-color: #6ed5d8;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	border-top-right-radius: 1rem ;
	padding: 1rem 1.6rem;
}

.password-eye-icon {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(-50%, -50%);
}

@media (min-width: 600px) {
	#login {
		background-color: #fff;
		background-image: url("../images/login_header_bg.c2f140e9f4a9.jpg");
		color: #555;
		height: 100vh;
	}
}
/* login footer
------------------------------------------- */

#login footer {
	bottom: 0;
	height: auto;
	left: 0;
	padding: .5rem;
	right: 0;
	width: 100%;
}
#login .copyright {
	padding: 0;
}
@media (min-height: 600px) {
	#login footer {
		position: fixed;
	}
}
/* @media (min-width: 600px) {
	#login footer {
		position: relative; 
	}
} */


/* ユーティリティー
------------------------------------------- */
.d-none {
	display: none;
}

.hc__alert {
	position: relative;
}

.hc__a__content {
	background-color: white;
	border: 2px solid white;
	border-radius: 4px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
	color: black;
	position: absolute;
	right: 0;
	width: 480px;
	z-index: 1;
}

.hc__a__content a:hover {
	color: #00aab4;
}

.hc__a__c__title {
	border-bottom: 2px solid #e5e6e6;
	padding: 8px;
}

.hc__a__c__menu {
	font-size: 18px;
	height: 240px;
	overflow-y: scroll;
	padding: 8px;
	width: 100%;
}

.hc__a__c__list {
	font-size: 18px;
	padding: 8px;
}

.hc__a__c__m__item {
	border-bottom: 1px solid #e5e6e6;
	font-size: 18px;
}

.hc__a__c__m__i__title {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.hc__a__c__m__i__message {
	font-size: 18px;
}

/* * スクロールバーの大きさ */
.hc__a__c__menu::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}

/* スクロールバーの色 */
.hc__a__c__menu::-webkit-scrollbar-track {
	background-color: #e5e6e6;
	border-radius: 10px;
}

/* スクロールバーのハンドル色 */
.hc__a__c__menu::-webkit-scrollbar-thumb {
	background: #00aab4;
	border-radius: 10px;
}

@media (max-width: 600px) {
	.hc__a__content {
		left: 0;
		position: fixed;
		width: 100%;
	}
}