@charset "utf-8";

#sp {
  display: none;
}
/*----------------------------------------
  .main_visual
----------------------------------------*/

/*PC*/

@media screen and ( min-width:1025px ) {
  /*メインビジュアル入れ替え*/
  .pc {
    display: block !important;
    max-width: 960px;
    margin: 0 auto;
   }
  .sp { display: none !important; }
}


/*タブレット*/
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
  .pc {
    display: block !important;
    max-width: 100%;
    margin: 0 auto;
   }
  .sp { display: none !important; }
	
 /**/	
  div{ max-width: none!important; }	

}


/*SP*/
@media screen and ( max-width:767px ) {
  /* メインビジュアル入れ替え */
.pc { display: none !important; }
.sp { display: block !important; }
}




/*----------------------------------------
  .content
----------------------------------------*/
.content {
  background: #fff;
  margin-top: 0px;
  margin-bottom: 50px;
}
.top_content > .inner {
  overflow: hidden;
}

*{
	box-sizing: border-box;
}

.section_content {
  margin-bottom: 73px;
}
.section_content .section_title {
  margin-bottom: 30px;
}
.list_content {
  overflow: hidden;
}
.list_content li {
  float: left;
}

.list_content li + li {
  margin-left: 24px;
}
.list_content li a {
  position: relative;
  display: block;
}
.list_content li a:hover {
  opacity: 0.5;
}
.list_content li .box_mark .mark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-color: rgba(185, 60, 100, 0.9);
}
.list_content li .box_mark .mark span {
  display: block;
  zoom:1;
  font-size: 117%;
  color: #fff;
  padding: 7px 20px 7px 10px;
  background: url(../img/share/ico-arrow_white_l_sm.png) 96% 12px no-repeat;
}



.area .search_input {
  margin-top: 5px;
}
.area .search_input .search_box {
  overflow: hidden;
}

.search_input .input_search {
  float: left;
}
.search_input .input_search input {
	width: 360px;
	outline: 0;
	height: 21px;
	border: 2px solid #deddde;
	padding: 0 0 0 8px;
}
.area_search p {
  font-size: 16px;
  margin-bottom: 6px;
}
.search_input .btn_search input {
  width: 41px;
  height: 25px;
  border: none;
  background: url(../img/share/btn-search.png) 0 0 no-repeat;
  outline: 0;
  cursor: pointer;
  margin-left: 5px;
  float: left;
}
.search_input input.btn_search:hover {
  opacity: 0.7;
}
.area_search .txt_ex {
  font-size: 16px;
  margin-top: 8px;
}
.area_map {
  position: relative;
}
.title_area_sp {
  display: none;
}
.area_map > ul {
  position: absolute;
  display: inline-block;
}
.area_map > ul > li ul li {
  float: left;
  margin-right: 12px;
  margin-bottom: 5px;
}
.area_map > ul > li > a,
.area_map ul li ul li a {
  display: inline-block;
  font-size: 15px;
  padding-left: 11px;
  line-height: 1
}
.area_map ul li ul li span {
  display: inline-block;
  font-size: 15px;
  padding-left: 11px;
  line-height: 1;
  background: url(../img/index/icon-arrow_map03.png) 0 3px no-repeat;
  color: #ccc;
}
.area_map ul li ul li a:hover {
  text-decoration: underline;
}
.area_map .area01 {
  top: 19px;
  left: 5px;
}
.area_map .area01 a {
  background: url(../img/index/icon-arrow_map01.png) 0 3px no-repeat;
}
.area_map .area02 {
  top: 16px;
  left: 174px;
  width: 125px;
}
.area_map .area02 a {
  background: url(../img/index/icon-arrow_map02.png) 0 3px no-repeat;
}
.area_map .area03 {
  top: 83px;
  right: 15px;
}
.area_map .area03 a {
  background: url(../img/index/icon-arrow_map04.png) 0 3px no-repeat;
}
.area_map .area04 {
  top: 110px;
  left: 56px;
  width: 170px;
}
.area_map .area04 a {
  background: url(../img/index/icon-arrow_map05.png) 0 3px no-repeat;
}
.area_map .area05 {
  top: 166px;
  right: 1px;
  width: 113px;
}
.area_map .area05 a {
  background: url(../img/index/icon-arrow_map06.png) 0 3px no-repeat;
}
.area_map .area06 {
  top: 236px;
  left: 11px;
  width: 113px;
}
.area_map .area06 a {
  background: url(../img/index/icon-arrow_map07.png) 0 3px no-repeat;
}
.area_map .area07 {
  top: 310px;
  left: 186px;
  width: 113px;
}
.area_map .area07 a {
  background: url(../img/index/icon-arrow_map03.png) 0 3px no-repeat;
}
.area_map .area08 {
  top: 280px;
  right: 0;
  width: 127px;
}
.area_map .area08 a {
  background: url(../img/index/icon-arrow_map08.png) 0 3px no-repeat;
}
.area_map .area09 {
  bottom: -5px;
  left: 37px;
  width: 160px;
}

.area_map .area09 > li ul li {
  width: 58px;
}
.area_map .area09 a {
  background: url(../img/index/icon-arrow_map09.png) 0 3px no-repeat;
}
.area_map > ul > li > a:hover {
  text-decoration: underline;
}

.sp_facebook {
  display: none;
}



/*
  bnr
----------------------------------------*/
.pc_space_bnr{
	width:960px;
}
.sp_space_bnr {
  display: none;
}




/***********************************
ファミーユの特徴
************************************/
.nav_feature  {
	display: flex;
	display: -webkit-flex;
	margin-bottom: 15px;
}
.nav_feature li {
	width: 240px;
	/* padding-bottom: 10px; */
	border-top: 2px solid #f292b8;
	border-right: 2px solid #f292b8;
	border-bottom: 2px solid #f292b8;
}
.nav_feature li:first-of-type{
	border-left: 2px solid #f292b8;
}
.nav_feature li:hover {
	background-color: #FDEDF3;
}
.nav_feature_anc {
	position: relative;
}
.nav_feature_anc:after {
	font-family: "FontAwesome";
	content: "\f107";
	margin: 0px 0 -40px 0;
	position: absolute;
	bottom: 20px;
	left: calc(50% - 20px);
	font-size: 60px;
	color: #f292b8;
}
.nav_feature img {
	padding: 25px 46px 8px;
}
.nav_feature p {
	padding-bottom: 28px;
	font-size: 22px;
	text-align: center;
}
.nav_feature i {
	padding-bottom: 10px;
	font-size: 24px;
	text-align: center;
}
.top02 .center {
	float: none;
}




/***********************************
CTAエリア
************************************/


/*タブレット*/
@media screen and ( max-width:1024px ) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
	
section.ctatop_box {
    width: 100%;
}		

}


section.ctatop_box {
	background: #fedde8;
    border-radius: 5px;
    width: 960px;
    height: auto;
    margin: 20px auto 40px;
	padding: 40px 20px 40px;
	clear: both;
}	

section.ctatop_box .pc_num{
	border: 2px solid #d34376;
	width: 452px;
	height: 82px;
    border-radius: 5px;	
	background: #fff;
	float: left;
	padding-left: 20px;
	padding-top: 10px;
}	

section.ctatop_box .pc_num img{
	vertical-align: middle!important;
}	


section.ctatop_box .pc_num span{
	font-size: 40px;
	font-weight: bold;
	/*color: #046bba;
	text-decoration: underline;*/
    border-radius: 5px;	
	margin-left: 20px;
	vertical-align: middle!important;
}

section.ctatop_box .siryou{
	border: 2px solid #d34376;	
	background: #fff;
	width: 452px;
	height: 82px;
    border-radius: 5px;	
	float: left;
	margin-left: 15px;
}

section.ctatop_box .siryou p{
	font-size: 30px;
	font-weight: bold;
	color: #d34376;
	float: left;
	margin-left: 20px;
	margin-top: 10px;	
}

section.ctatop_box .siryou p span{
	font-size: 16px;
	color: #d34376;
	font-weight: normal;
	display: block;
	margin-top: -5px;
}


section.ctatop_box .siryou img{
	width: 110px;
	float:left;
	margin-left: 10px;
	margin-top: 10px;
}


section.ctatop_box p.t_link{
	text-decoration: underline;
	font-size: 26px;
	text-align: center;	
	padding-top: 20px;
	clear: both;
}

section.ctatop_box p.t_link a{
	color: #046bba;
}

section.ctatop_box .cap{
	font-size: 16px;
	margin: 10px;
	text-align: center;
}


/*タブレット*/
@media screen and ( max-width:1024px ) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
	
section.ctatop_box .cap{
	font-size: 15px;
	text-align: left;
}	

}



/***********************************
プランエリア
************************************/

section.topplan_bg {
    width: 100%;
    background: url(/index/img/bg_plan.gif) repeat;
    padding-top: 5px;
    padding-bottom: 25px;
	padding-left: 15px;
	padding-right: 15px;	
}
	

/*セットプラン*/
h3.setplan_top{
	background: #ee6b9a;
	color:#fff;
	font-weight: bold;
	font-size: 20px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	width: 310px;
	margin-bottom: 0;
	margin-top: 10px;
	text-align: center;
	padding: 6px 0;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);			
}


div.setplan_top{
	background: #fff;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	width: 310px;
	height: 370px;
	padding: 12px;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);	
}

/*オリジナルプラン*/
h3.originalplan_top{
	background: #04d099;
	color:#fff;
	font-weight: bold;
	font-size: 20px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	width: 310px;
	margin-bottom: 0;
	margin-top: 10px;
	text-align: center;
	padding: 6px 0;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);	
	margin-left: 15px;
}

div.originalplan_top{
	background: #fff;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	width: 310px;
	height: 370px;
	padding: 12px;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);	
	margin-left: 15px;
}

/*火葬プラン*/
h3.kasoplan_top{
	background: #faa82a;
	color:#fff;
	font-weight: bold;
	font-size: 20px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	width: 310px;
	margin-bottom: 0;
	margin-top: 10px;
	text-align: center;
	padding: 6px 0;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);	
	margin-left: 15px;
}

div.kasoplan_top{
	background: #fff;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	width: 310px;
	height: 370px;
	padding: 12px;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);	
	margin-left: 15px;	
}

.topplan_bg .float_l{
	float: left;	
	padding-bottom: 10px;
}


.topplan_bg .float_l p.detail{
	font-size: 12px;	
	margin-top: 8px;
	font-weight: bold;
}

.topplan_bg .float_l p.cap{
	font-size: 11px;	
	margin-top: 6px;
	font-weight: bold;
}

.topplan_bg span.linkBox.inBox{
	clear: both;
	margin-top: 10px;
}

/***********************************
家族葬の斎場・ホールを探す
************************************/

/*左寄せ解除*/
.sub_info {
    width: 100%;
    float: none;
}	


/***********************************
家族葬とは
************************************/

section.top_about{
	clear: both;
}

section.top_about div.half{
	width: 460px;	
	float: left;
	margin-top: 20px;	
	margin-left: 35px;
	margin-bottom: 20px;
}

section.top_about div.half.ml0{
	margin-left: 0px;
}

section.top_about dd{
	font-size: 16px;
	margin-top: 20px;
	line-height: 2;
}

/***********************************
家族葬のファミーユとは
************************************/


h3.top_famiabout span {
    font-size: 22px;
	font-weight: bold;
}	


h3.top_famiabout {
	padding-bottom: 5px;	
	text-align: center;
}	

section.top_famiabout{
	margin-bottom: 40px!important;
	overflow: hidden;
}


section.top_famiabout div.half{
	width: 465px;	
	border-radius: 10px;
	/*border: 2px solid #d34376;*/
	background: #fcdce8;
	padding: 10px 20px 20px 20px;
	float: left;
	margin-left: 30px;
}


section.top_famiabout div.half.ml0{
	margin-left: 0
}


section.top_famiabout div.half div.inside{
	background: #fff;
	padding: 10px;
	font-size:16px;
	line-height: 2.0;
}


/*キャプション追加 20201127*/
section.top_famiabout div.half div.inside .cap{
	font-size: 0.8em;
}



/***********************************
ファミーユの想い、もしものための事前準備
************************************/

section.top_omoi,section.top_prepare{
	margin-bottom: 40px!important;
}

section.top_omoi div.third ,section.top_prepare div.third{
	width: 310px;	
	float: left;
	margin-left: 15px;
}

section.top_omoi div.third.ml0 ,section.top_prepare div.third.ml0{
	margin-left: 0
}



/***********************************
ご葬儀の事例、よく見られているページ
************************************/

section.case,section.pupular{
	float: none;
	margin-bottom:20px!important;
}


/***********************************
新着情報
************************************/

.news ul li:first-child a {
  border-top: 1px solid #cccccc;
}
.news ul li a {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid #cccccc;
  background: url(../img/index/ico-arrow_news.png) 98% 50% no-repeat;
}
.news ul li a:hover {
  background: url(../img/index/ico-arrow_news.png) 98% 50% no-repeat #f5f5f5;
}
.news ul li a dl {
  display: inline-table;
  vertical-align: middle;
}
.news ul li a dl dt {
  display: table-cell;
  vertical-align: middle;
  width: 112px;
}
.news ul li a dl dd {
  display: table-cell;
  vertical-align: middle;
  width: 555px;
  font-size: 16px;
  padding-left: 18px;
}
.news ul li a dl dd span {
  display: inline-block;
}
.news ul li a dl dd .date {
  margin-right: 10px;
}

/*今回追加分*/
section.news{
	margin-bottom:40px!important;
	clear: both;
	overflow: hidden;
}

.news ul {
	width:100%;
	margin-bottom:15px!important;
}


/***********************************
メディアで紹介されました。
************************************/

h2.top_tit_media span {
    font-size: 28px;
	margin: 0 20px;
}	

h2.top_tit_media {
	margin-bottom: 20px;
	margin-top: 20px;
	text-align: center;	
}	


h2.top_tit_media img{
	width: auto;
	height: 66px;
}	


section.topmedia_bg {
    width: 100%;
    background: url(/index/img/bg_rp_media.jpg) repeat;
    padding-top: 5px;
    padding-bottom: 20px;
	padding-left: 15px;
	padding-right: 15px;
	clear: both;
	margin-top: 20px;
	margin-bottom: 40px;	
}

section.topmedia_bg ul{
	font-size: 16px;
	margin: 0 20px 20px 20px;
}

section.topmedia_bg ul li{
	margin-bottom: 10px;
	padding-bottom: 5px;
	vertical-align: middle;
	border-bottom: dotted 1px #333;
}

section.topmedia_bg ul li i{
	margin-right: 10px;
	vertical-align: bottom;
}


/***********************************
よくあるご質問
************************************/

.qa ul{
	display: block;
	margin-bottom: 15px;
}

.qa li{
	display: block;
	font-size: 16px;
}

.qa p.qbox{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D2D2D2;
	padding-top: 15px;
	padding-bottom: 15px;
}

.qa p.qbox span{
	padding-left: 40px;
	padding-right: 40px;
}

.qa p.abox{
	padding-left: 40px;
	padding-right: 40px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D2D2D2;
	padding-top: 15px;
	padding-bottom: 15px;
	line-height: 2;
}


.qa p.qbox{
	display: block;
	background-image: url(/search_area/img/c05_iconQ.png);
	background-repeat: no-repeat;
	background-position: 15px 16px;
	background-size:17px 17px;
}

.qa p.qbox span{
	display: block;
	background-image: url(/search_area/img/templates/ico-arrow_down.png);
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size:15px auto;
}

.qa p.qbox.on span{
	display: block;
	background-image: url(/search_area/img/templates/ico-arrow_up.png);
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size:15px auto;
}

.qa p.abox{
	display: none;
	background-color: #F9F9F9;
	background-image: url(/search_area/img/c05_iconA.png);
	background-repeat: no-repeat;
	background-position: 15px 22px;
	background-size:17px 17px;
}



/***********************************
共通見出し
************************************/	

h2.top_tit span {
    border-left: none !important;
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 10px;
    font-size: 28px;
}	
	
h2.top_tit {
	border-bottom: 3px solid #d34376;
	border-top: 3px solid #d34376;
	margin-bottom: 30px;
	margin-top: 30px;
	padding: 7px 5px 5px 5px;
	/*background: #fbe9ef;*/
}	


h3.top_tit span {
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 10px;
    font-size: 24px;
	font-weight: bold;
}	
	
h3.top_tit {
	border-left: 4px solid #d34376;
	margin-bottom: 20px;
}

	
h3.top_tit02 span {
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 10px;
    font-size: 24px;
	color: #d34376;
	font-weight: bold;
}	
	
h3.top_tit02 {
	border-left: 3px solid #d34376;
	margin-bottom: 20px;
	border-bottom: dotted 1px #333;	
}	
	


/***********************************
共通項目
************************************/	

.marker_yellow_hoso{
	background: linear-gradient(transparent 60%, #ffff66 60%);
	font-weight: bold;	
}


.mizuiro{
	color: #63bbde;
}

.clearfix::after {
	clear: both;
	display: block;
	content: "";
	height: 0;
	width: 0;
}

a.link_blue {
color: #1111cc;
    text-decoration: underline;
}

.ml0{
	margin-left: 0;
}

.mb60{
	margin-bottom: 60px;
}