@charset "utf-8";

/* ご支援の種類
-------------------------------------------------- */
#pageHeader.withImg {
	background-image: url(../images/img_1.jpg);
}

@media screen and (max-width: 768px) {
	#pageHeader.withImg h1::after {
		background-image: url(../images/img_1_sp.jpg);
	}
}

.lead {
	background: url(../images/bg_1.svg) no-repeat 0 40%;
}

.lead h2 {
	margin-bottom: 76px;
	font-size: 4.0rem;
	text-align: center;
	line-height: 1.4;
}

.lead h3 {
	font-size: 3.2rem;
}

.lead p {
	font-size: 1.6rem;
}

.lead .col2 .img {
	max-width: none;
	padding-top: .625em;
}

.donateArea {
	padding: 96px 0;
}

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

.donateArea header h2 {
	margin: 0;
}

.donateArea header .btn {
	margin: 0;
}

.donateArea .box {
	border-color: var(--white);
}

.donateArea .sponcership .box {
	border-color: var(--borderLightGray);
}

.donateArea .sponcership .col {
	align-items: center;
}

.donateArea img {
	width: 100%;
	border-radius: 8px;
}

.donateArea .sponcership img {
	border-radius: 0;
}

.donateArea .btn {
	margin-top: 24px;
}

@media screen and (min-width: 769px) {
	.donateArea .monthly .sponcership .btn {
		width: 100%;
		min-width: 0;
	}

	.donateArea .monthly .sponcership .btn {
		max-width: 472px;
	}
}

.other .col {
	flex-wrap: wrap;
	margin-bottom: -32px;
}

.other .box {
	width: calc((100% - 48px) / 2);
	margin-bottom: 32px;
}

.support .box {
	display: flex;
	flex-direction: column;
}

.support img {
	width: 100%;
}

.support img+p {
	margin-top: 1em;
	flex: 1;
}
#contentBody .box.bgPaleHip {
    padding: 48px 40px;
}

#contentBody p.btn {
    margin-bottom: 16px;
}

.hidden_content {
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border: none;
}

@media screen and (max-width: 768px) {
	.lead {
		background-position: 0 10%;
		background-size: 88%;
	}

	.lead h2 {
		margin-bottom: 52px;
		font-size: 2.8rem;
		text-align: left;
	}

	.lead h3 {
		font-size: 2.4rem;
	}

	.donateArea {
		padding: 56px 0 64px;
	}

	.donateArea .monthly .col,
	.donateArea .box {
		margin-top: 24px;
	}

	.donateArea header {
		display: block;
	}

	.donateArea header h2 {
		margin-bottom: 16px;
	}

	.donateArea header .btn {
		margin: 0 auto;
	}

	.other .box {
		width: auto;
	}

	.other .box:not(:last-child) {
		margin-bottom: 24px;
	}
	#contentBody .box.bgPaleHip {
		padding: 48px 40px;
	}
	#contentBody .box.bgPaleHip {
		padding: 40px 16px;
	}
	#contentBody .box.round {
		border-radius: 8px;
	}
	
}

.txt_center {
	text-align: center;
}

.circleCenter {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 60px;
}

.colCircle {
	width: 760px;
	height: 760px;
	border-radius: 50%;
	background-color: #fef3ee;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contentCircle {
	width: 437px;
	height: auto;
}

.img_circle_left {
	position: absolute;
	left: -100px;
}

.img_circle_right {
	position: absolute;
	right: -110px;
}

.tabContentSide {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
}

.tabPanelContent {
	background-color: #fff;
	padding: 32px 24px;
	border-radius: 16px;
	width: 341px;
}

.tabPanelImage {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
}

.tabPanelContent .txt {
	color: var(--text-black, #1B1B1B);
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	/* 27px */
	letter-spacing: 0.72px;
	margin-bottom: 24px;
}

.tabVoice {
	margin: 64px 0;
}

.tabVoiceContent {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	align-self: stretch;
	margin-top: 40px;
}

.tabVoiceAvata {
	display: flex;
	width: 140px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.tabVoiceAvata .txt {
	color: var(--text-black, #1B1B1B);
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	/* 24px */
	letter-spacing: 0.64px;

}

.tabVoiceText {
	position: relative;
	display: flex;
	padding: 32px 24px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	flex: 1 0 0;
	border-radius: 16px;
	background: var(--White, #FFF);
}

.tabVoiceText img {
	position: absolute;
	left: -23px;
}

.tabVoiceText p {
	margin-bottom: 0;
}

.processBequest ul li {
	position: relative;
	display: flex;
	padding: 40px 32px;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	align-self: stretch;
	background: #FFF;
}

.processBequestTitle {
	display: flex;
	gap: 24px;
	align-self: stretch;
	align-items: center;
}

.processBequestTitle span {
	color: var(--Orange, #ED632F);
	font-size: 46px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	/* 69px */
	letter-spacing: 3.68px;
}

.borderBottom {
	border-bottom: 5px solid #FEF3EE;
}

.processBequestTitle h4 {
	margin: 0;
}

.processBequest ul li:nth-child(1) {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.processBequest ul li:nth-last-child(1) {
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	margin-bottom: 28px;
}

.bequestBox {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: -26px;
	z-index: 2;
}

.iconTop {
	display: none;
}

.processBequest h3 {
	margin-bottom: 40px;
}

.institutionBequest {
	margin: 64px 0;
}

.institutionBequest h3 {
	margin-bottom: 40px;
}

.supportBequest h3 {
	margin-bottom: 40px;
	margin-top: 0;
}

.bgPaleHip {
	background-color: #FEF3EE;
}

.align_center {
	display: flex;
	justify-content: center;
}

.numberBequestImg {
	width: 32px;
	height: 32px;
	background-color: #ED632F;
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	/* 27px */
	letter-spacing: 0.72px;
}

.txtColBequest {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}

.txtBequestText p {
	color: var(--text-black, #1B1B1B);
	font-family: "Hiragino Kaku Gothic Std";
	font-size: 17px;
	font-style: normal;
	font-weight: 300;
	line-height: 180%;
	letter-spacing: 0.68px;
	width: 646px;
}

.mt-16 {
	margin: 16px 0;
}

.img-text img {
	border-radius: 16px;
}

.boxBequest {
	margin: 96px;
}

.img1,
.img2 {
	position: relative;
}

.imgBox {
	position: absolute;
	bottom: 0;
	right: 0;
}
.funeraContent .text{
	margin-top: 24px;
	margin-left: 210px;
}


.box .center br{
	display: none;
} 
.mt-15{
	margin-top: 15px;
}

@media screen and (max-width:720px) {
	.colCircle {
		flex-shrink: 0;
		width: 842px;
		height: 842px;
	}
	.box .center br{
		display: block;
	} 

	.img_circle_left {
		width: 100%;
		left: 14%;
		top: 112.5px;
	}

	.contentCircle {
		margin-top: 139px;
	}

	.img_circle_left img {
		width: 260px;
	}

	.img_circle_right {
		right: -250px;
		top: 0;
		top: 112.5px;
	}

	.img_circle_right img {
		width: 260px;
	}

	.textCircle {
		display: flex;
		gap: 32px;
		margin-left: 22%;
	}
    .funeraContent .text {
		margin-top: 24px;
		margin-left: 0;
	}
	.textCircle p {
		min-width: 260px;
	}

	.tabPanelContent {
		width: 100%;
	}

	.tabPanelImage img {
		width: 96px;
		height: 80px;
	}

	.tabVoiceContent {
		display: block;
	}

	.tabVoiceAvata {
		width: 100%;
	}

	.tabVoiceAvata img {
		width: 64px;
		height: 64px;
	}

	.tabVoiceText {
		margin-top: 32px;
	}

	.tabVoiceText .iconDown {
		display: none;
	}

	.iconTop {
		display: block;
		position: absolute;
		width: 100%;
		height: 20px;
		top: -19px;
	}

	.tabVoiceText img {
		left: 0;
	}

	.bequestBox {
		width: 85%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: -17px;
		z-index: 2;
	}

	.borderBottom {
		border-bottom: 3px solid #FEF3EE;
	}

	.borderBottom p {
		width: 100%;
	}

	.borderBottom a {
		max-width: 100%;
	}

	.bequestBox img {
		width: 30px;
		height: 15px;
	}

	.selectDonate img {
		width: 20px;
		height: 20px;
	}

	.txtBequestText p {
		color: var(--text-black, #1B1B1B);
		font-family: "Hiragino Kaku Gothic Std";
		font-size: 17px;
		font-style: normal;
		font-weight: 300;
		line-height: 180%;
		letter-spacing: 0.68px;
		width: 246px;
	}

	.tabPanelImage img {
		width: 96px;
		height: 80px;
	}

	.boxBequest {
		margin: 64px 0;
	}

	.numberBequestImg {
		width: 20%;
	}

	.txtBequestText {
		width: 80%;
	}
}