@charset "UTF-8";

/* 供養・永代供養  */
@media (min-width: 768px) {
	.h3_title{ border-bottom: 1px solid #ea5532; padding: 0 0 10px 0; margin: 60px 0 30px 0;}
	.p_center{ text-align: center; line-height: 2.0;}
	
	.houji{ display: flex; justify-content: space-around; margin: 40px 0 20px 0; padding: 0; list-style: none;}
	.houji li{ writing-mode: vertical-rl; background-color: #1a3866; color: #fff; padding: 20px; position: relative; height: 130px;}
	.houji li::after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 14px; border-color: transparent transparent transparent #1a3866; position: absolute; right: -2vw; top: 60px;}
	.houji li:last-child::after{ display: none;}
	
	.right_text{ text-align: right; display: block;}
	.right_text2{ text-align: right; display: block; margin: 0 60px;}
	
	.important{ background-image: url("../images/back.png"); background-repeat: no-repeat; background-size: contain; text-align: center; line-height: 2.0; margin: 0 10px; padding: 70px 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;}
	
	.other{ display: flex; flex-wrap: wrap; margin: 0 60px;}
	.other li{ width: 33%; margin: 0 0 15px 0;}
	
	.eidai{ display: flex; flex-wrap: wrap; margin: 30px 0; list-style: none; text-align: center; padding: 0;}
	.eidai li{ width: 48%; background-color: #fff; border-radius: 30px; padding: 20px; margin: 1%;}
	
	.dl_box{ display: flex; flex-wrap: wrap; margin: 0;}
	.dl_box dt{ width: 100px; font-weight: normal; color: #af6767;}
	.dl_box dd{ width: calc(100% - 100px);}
	
	.illu_flex{ text-align: left;}
	.illu_flex img{ width: 250px; margin: 0 0 0 20px;}
	
	.haka_flex{ display: flex; justify-content: center; align-content: center;}
	.haka_flex img{ width: 100px;}
	.haka_flex>div{ margin: 0 20px; display: inline-flex; justify-content: center; align-items: center; flex-direction: column;}
	
	.hoji_flex{ display: flex; align-content: center; justify-content: center; margin: 10px 0 20px 0;}
	.hoji_flex img{ width: 160px;}
	.hoji_flex>div{ margin: 0 20px; text-align: center;}
	.hoji_flex>div>div{ display: flex; margin: 15px 0 0 0;}
	.hoji_flex>div>div>div{ background-color: #EDE8E8; padding: 20px; border-radius: 10px; margin: 0 20px;}
	.hoji_flex>div>div>div span{ font-weight: bold;}
	
	.stepcircle{ width: 160px!important; height: 40px!important;}
	.stepcircle span{ line-height: 1em!important; font-size: 16px!important; top: 8px!important;}
}
@media (min-width: 768px) and (max-width: 1000px) {
	.houji li{ padding: 10px; margin: 0;}
	.houji li::after{ display: none;}
}
@media (max-width: 767.98px) {
	.h3_title{ border-bottom: 1px solid #ea5532; padding: 0 0 10px 0; margin: 50px 0 20px 0; font-size: 16px;}
	.p_center{ text-align: left; line-height: 2.0;}
	
	.top_contents p { text-align: left;}
	
	.houji{ display: flex; flex-wrap: wrap; justify-content: center; margin: 40px 0 20px 0; padding: 0; list-style: none;}
	.houji li{ writing-mode: vertical-rl; background-color: #1a3866; color: #fff; padding: 10px; position: relative; height: 130px; margin: 0 20px 10px 0;}
	.houji li::after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #1a3866; position: absolute; right: -15px; top: 60px;}
	.houji li:last-child::after{ display: none;}
	
	.right_text{ text-align: right; display: block;}
	.right_text2{ text-align: right; display: block; margin: 0;}
	
	.important{ background-image: url("../images/back.png"); background-repeat: no-repeat; background-size: contain; background-position: bottom; text-align: left; line-height: 2.0; margin: 0; padding: 0 0 140px; 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;}
	
	.other{ display: flex; flex-wrap: wrap; margin: 0; padding: 0 0 0 20px;}
	.other li:nth-child(odd){ width: calc(65% - 20px); margin: 0 0 15px 0;}
	.other li:nth-child(even){ width: 35%; margin: 0 0 15px 0;}
	
	.eidai{ display: flex; flex-wrap: wrap; margin: 20px 0; list-style: none; text-align: center; padding: 0;}
	.eidai li{ width: 100%; background-color: #fff; border-radius: 10px; padding: 15px; margin: 1%;}
	
	.dl_box{ display: flex; flex-wrap: wrap; margin: 0;}
	.dl_box dt{ width: 100%; font-weight: normal; color: #af6767;}
	.dl_box dd{ width: 100%;}
	
	.illu_flex{ display: flex; flex-wrap: wrap; text-align: left;}
	.illu_flex img{ margin: 20px auto 20px; max-width: 250px;}
	.illu_flex div{ display: block;}
	
	.haka_flex{ display: flex; justify-content: center; align-content: center;}
	.haka_flex img{ width: 100px;}
	.haka_flex>div{ margin: 0 10px; display: inline-flex; justify-content: center; align-items: center; flex-direction: column;}
		
	.hoji_flex{ display: flex; align-content: center; justify-content: center; flex-wrap: wrap; margin: 10px 0 20px 0;}
	.hoji_flex img{ width: 160px;}
	.hoji_flex>div{ width: 100%;  margin: 0; text-align: center;}
	.hoji_flex>div:first-child{ margin: 0 0 15px 0;}
	.hoji_flex>div>div{ display: flex; flex-wrap: wrap; margin: 0;}
	.hoji_flex>div>div>div{ width: 100%; background-color: #EDE8E8; padding: 15px; border-radius: 10px; margin: 10px;}
	.hoji_flex>div>div>div span{ font-weight: bold;}
	
	.stepcircle{ width: 140px!important; height: 30px!important;}
	.stepcircle span{ line-height: 1em!important; font-size: 13px!important; top: 3px!important;}
}


@media (min-width: 768px) {
	.white_btn_box{ margin: 30px 0 0 0!important;}
	.white_btn{ background-color: rgba(255,255,255,0.8); border-radius: 10px; width: 200px; height: 50px; display: inline-flex; justify-content: center; align-items: center; position: relative;}
	.white_btn::before{ content: ""; width: 12px; height: 12px; border-top: 1px solid #a7a7a7; border-right: 1px solid #a7a7a7; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 10px;}
	
	.scroll_pc .anchor_menu_list2 a { width: 200px;}
}
@media (max-width: 767.98px) {
	.white_btn_box{ margin: 20px 0 0 0!important;}
	.white_btn{ background-color: rgba(255,255,255,0.8); border-radius: 10px; width: 150px; height: 40px; display: inline-flex; justify-content: center; align-items: center; position: relative; font-size: 12px;}
	.white_btn::before{ content: ""; width: 8px; height: 8px; border-top: 1px solid #a7a7a7; border-right: 1px solid #a7a7a7; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 10px;}
}