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

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

/* --------------------------------------------
						墓石
---------------------------------------------- */ 

.tombstone { width: 100%; display: block; content: ""; background: url(../../_common/img/share/back.jpg)no-repeat; background-size: 100% 45vw; background-position: 0 420px;}
#contents cleafix { clear: both; display:block;  }

@media screen and (max-width:1600px){
.tombstone { background-size: auto 50em; background-position: 0 420px;}
}
@media screen and (max-width:1024px){
.tombstone { background-size: auto 68%; background-position: 0 420px; }
}
@media screen and (max-width:768px){
.tombstone { }
}

/* ----- DESIGN ----- */
.tombstone__design { display: block; content: ""; position: relative; float: right; background: url(../img/cnt_01.jpg)no-repeat; background-size: contain; max-width: 1200px; width: 90%; padding: 13em 0 25em;}
.tombstone__design__inner { display: block; position: absolute; top: 3em; left: -30%; width: 440px; padding: 4em 0 4em 6%; background: #fff;}
.tombstone__design__inner h3 { display: block; content: ""; background: url(../img/h3_d.jpg)no-repeat; background-size: contain; background-size: 230px; background-position: 40% 8px; padding: 1em 0; margin-bottom: 1.5em; font-size: 18px; font-size: 1.8rem; }
.tombstone__design__inner p { font-size: 14px; font-size: 1.4rem; }
.tombstone__design__inner span { display: block; font-size: 14px; font-size: 1.4rem; color: #738597; padding-top: 1.5em; }
.tombstone__design__inner .brrp { }

@media screen and (max-width:1600px){
.tombstone__design__inner { top:12em; left:-8%; width: 550px; }
.tombstone__design__inner .brrp {display: none;}
}
@media screen and (max-width:1024px){
.tombstone__design { float: none; width: 100%; min-height: 300px; background-size: auto 60%; background-position: top right; padding-bottom: 30em;}
.tombstone__design__inner { top:16em; left:5%; }
}
@media screen and (max-width:768px){
.tombstone__design__inner { width: 310px; padding: 4em 6% 4em ;}
.tombstone__design__inner .brrp {display: block;}
.tombstone__design__inner h3 { background-size: 150px; background-position: 50% 8px; padding: 1em 0;  }
}
@media screen and (max-width:499px){
.tombstone__design__inner { top: 20em; left: 0; right: 0; margin: 0 auto;  padding: 4em 0 ; width: 85%;}
.tombstone__design__inner h3 { text-align: center;}
.tombstone__design__inner p {text-align: center;}
.tombstone__design__inner span { text-align:center; }
}


/* ----- REFORM ----- */
.tombstone__reform { display: block; content: ""; position: relative; float: none; background: url(../img/cnt_02.jpg)no-repeat; background-size: contain; max-width: 1200px; width: 90%; padding: 13em 0 25em; margin-top: 45em;}
.tombstone__reform__inner { display: block; position: absolute;  top: 3em; right: -30%; width: 440px; padding: 4em 0 4em 6%; font-size: 14px; font-size: 1.4rem; background: #fff;}
.tombstone__reform__inner h3 { display: block; content: ""; background: url(../img/h3_r.jpg)no-repeat; background-size: contain; background-size: 230px; background-position: 20% 8px; padding: 1em 0; margin-bottom: 1.5em; font-size: 18px; font-size: 1.8rem; }
.tombstone__reform__inner p { font-size: 14px; font-size: 1.4rem; }
.tombstone__reform__inner .brrp { }

@media screen and (max-width:1600px){
.tombstone__reform { margin-top: 50em;}
.tombstone__reform__inner { top:12em; right:-8%; width: 550px; padding: 4em 0 4em 6%; }
.tombstone__reform__inner .brrp { display: none;}
}
@media screen and (max-width:1024px){
.tombstone__reform {  width: 100%; min-height: 300px; background-size: auto 60%; background-position: top right; margin-top: 5em;}
.tombstone__reform__inner { top:16em; right:5%;  }
}
@media screen and ( max-width:768px){
.tombstone__reform { margin-top: 8em; margin-bottom: 20em;}
.tombstone__reform__inner { width: 310px; padding: 4em 6% 4em ;}
.tombstone__reform__inner .brrp { display: block;}
.tombstone__reform__inner h3 { background-size: 150px; background-position: 50% 8px; padding: 1em 0;  }
}
@media screen and (max-width:499px){
.tombstone__reform__inner { top: 20em; left: 0; right: 0; margin: 0 auto; width: 85%;}
.tombstone__reform__inner h3 { text-align: center;}
.tombstone__reform__inner p {text-align: center;}
}




/* --------------------------------------------
						エクステリア
---------------------------------------------- */ 
	
.exterior { width: 100%; display: block; content: ""; background: url(../../_common/img/share/back.jpg); background-size:auto 22.5em; background-repeat: repeat-x;  background-position: 0 330px; margin: 0em auto 6em; }
.exterior__inner { display: block; content: ""; position: relative;background: url(../img/cnt_03.jpg)no-repeat; background-size: contain; max-width: 970px; width: 100%; padding: 13em 0; margin: 0 auto; }
.exterior__inner__box { display: block; position: absolute; top: 16em; left: 0; right: 0; max-width: 650px; width: 80%; padding: 4em 3%; margin: 0 auto; font-size: 14px; font-size: 1.4rem; background: #fff; }
.exterior__inner__box p { font-size: 14px; font-size: 1.4rem; text-align: center; }
.exterior__inner__box br { }

@media screen and (max-width:768px){
.exterior { background-size: auto 300px; background-position: 0 500px; padding-bottom:150px;}
.exterior__inner { height: 100px; background-size: auto 100%; background-position: right; }
.exterior__inner__box { top: 23em; }
}
@media screen and (max-width:599px){
.exterior__inner { background-size: auto 80%; }
.exterior__inner__box p { text-align: left; width: 90%; margin: 0 auto;}
.exterior__inner__box br {  display: none;}
}



/* --------------------------------------------
					　	ボランティア
---------------------------------------------- */ 

.volunteer { }
.volunteer__inner { max-width: 830px; width: 85%; margin: 0 auto;}
.volunteer__inner div { display: inline-block; max-width: 490px; width: 58%; padding-top: 1em; vertical-align: top;
margin-right: 4%; }
.volunteer__inner div::before {}
.volunteer__inner p { padding-top: 1.25em;}
.volunteer__inner p br {}
.volunteer__inner span { display: block; margin-top: 1.5em; color: #D61515; font-weight: 800;  padding-bottom: 1em; }
.volunteer__inner img { max-width: 325px; width: 35%; height: auto; vertical-align: top;}

@media screen and (max-width:768px){
.volunteer__inner div { padding-top: 0em;  }
}
@media screen and (max-width:450px){
.volunteer__inner div { display: block; position: relative; width: 100%; padding-top: 0;}
.volunteer__inner div::before { display: block; content: ""; background: url(../img/collabo.jpg)no-repeat; width: 300px; padding: 10em 0; background-size: auto 100%; margin: 0 18% 1.5em; }
.volunteer__inner p br { display: none;}
.volunteer__inner span { margin-top: 0;}
.volunteer__inner img { display: none;}
}


/* ----- GARALLY ----- */
.volunteer__gallary { max-width: 1180px; width: 85%; margin: 5em auto 0; }
.volunteer__gallary h4 { text-align: center; margin-bottom: 2em;}


/* ----- POPUP----- */
.Popup { width: 100%; display: flex; justify-content: space-between; max-height: 140px; height: 10vw; overflow: hidden;}
.Popup a { transition: .3s; margin-right: 2.5%; width: auto;}
.Popup a img { height: 100%; object-fit: cover; }
.Popup a:hover { transition: .3s; opacity: .7; }
.Popup a:last-of-type { margin-right: 0;}