@charset "utf-8";

/* ShipporiMincho-Regular */
@font-face {
	font-family: 'ShipporiMincho';
	font-weight:400;
	font-style:normal;
	src: url('/commons/webfonts/ShipporiMincho-Regular.woff2') format('woff2'),
	url('/commons/webfonts/ShipporiMincho-Regular.ttf') format('truetype'); 
	font-display: swap;
}

/* ShipporiMincho-Bold */
@font-face {
	font-family: 'ShipporiMincho';
	font-weight:700;
	font-style:normal;
	src: url('/commons/webfonts/ShipporiMincho-Bold.woff2') format('woff2'),
	url('/commons/webfonts/ShipporiMincho-Bold.ttf') format('truetype');
	font-display: swap;
}


/* ZenKakuGothicNew-Medium */
@font-face {
	font-family: 'ZenKakuGothicNew';
	font-weight:500;
	font-style:normal;
	src: url('/commons/webfonts/ZenKakuGothicNew-Medium.woff2') format('woff2'),
	url('/commons/webfonts/ZenKakuGothicNew-Medium.ttf') format('truetype');
	font-display: swap;
}

/* ZenKakuGothicNew-Bold */
@font-face {
	font-family: 'ZenKakuGothicNew';
	font-weight:700;
	font-style:normal;
	src: url('/commons/webfonts/ZenKakuGothicNew-Bold.woff2') format('woff2'),
	url('/commons/webfonts/ZenKakuGothicNew-Bold.ttf') format('truetype');
	font-display: swap;
}



html {
    scroll-behavior: smooth;
}


body {
	font-size: 18px;
	font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
	color: #5F6C75;
	line-height: 1.2;
	text-align: left;
	padding-top: 0;
	letter-spacing: 0.05em;
}

h1 {
	font-family: 'ZenKakuGothicNew',"Arial","sans-serif";
	font-weight:500;
}


h2 ,h3 ,h4 ,h5 ,h6 ,dt,th,.lead {
	font-family: 'ZenKakuGothicNew',"Arial","sans-serif";
	font-weight:500;
}



a {
	font-weight:bold;
	color: #5EC2DD;
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}


a:hover {color:#E07A84;}

a img {border: 0;}

a:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}


main img { border-radius:10px;}



i {text-decoration: none;}

.innr {
	width: 90%;
	margin: 0 auto;
	max-width: 1280px;
}

/*ボタン*/
.btn a {
	box-sizing: border-box;
	background-color: #5EC2DD;
	text-align: center;
	font-family: 'ZenKakuGothicNew',"Arial","sans-serif";
	font-weight:700;
	border-radius: 1.25em;
	padding: .5em 1em;
	display: block;
	color: #FFF;
	line-height:1.1em;
	font-size:18px;
	border:2px solid #5EC2DD;
	width:50%;
	height:2.5em;
	margin:1.5em auto;
}
.btn a:hover {color:#5EC2DD;background-color: #FFF;}

.w-100 a {width:100%;}
.w-90 a {width:90%; margin:0 auto;}

summary {
	list-style: none;
}
summary::-webkit-details-marker {
  display:none;
}







@media screen and (min-width:769px) {
.only-sp {display: none !important;}
a[href^="tel:"] {pointer-events: none;}
}

@media screen and (max-width:768px) {
html, body {
  height: 100%;
  min-height: 100dvh; /* ← Chromeのアドレスバー伸縮に対応し常に固定される */
}
body { overflow: auto !important; }
	
body {font-size: 15px;}
.only-pc {display: none !important;}
.innr {width: 96%;}

#header {position: fixed;z-index: 10;}

#header-contact span{display: none;}


/*ボタン*/
.btn a {width:100%; font-size:16px;}

h2,h3 ,h4 ,h5 ,h6 {font-weight:700;}
	
}



/*contents
========================================*/

section{ padding:60px 0; scroll-margin-top: 120px;}






/*h1*/


.in .h1_head {
	padding:240px 0 105px 0;
	background-size:cover;
	background-position:center center;
	background-color:rgba(255,255,255,0.3);
	background-blend-mode:lighten;
}

.h1_head h1{
	color: #5F6C75;
	text-shadow:0 0 10px #fff;
	background-color:rgba(255,255,255,0.8);
	padding-bottom: 0.1em;
	letter-spacing: 0.1em;
	font-family: 'ZenKakuGothicNew',"Arial","sans-serif";
	font-weight:500;
}


/*in h1 bg*/
.h1_head  {background-image:url(/commons/img/top_01.jpg);}






.in h1{
	font-size:42px;
	text-align: center;
	color:#5F6C75;
}





main h2 {
  position: relative;
  text-align: center;       /* 見出し中央寄せ */
  font-size: 42px;
  margin:0 0 2em 0;            /* 上下の余白 */
  color:#5F6C75;
}

main h2::before,
main h2::after {
  content: "";
  display: block;
  width: 50%;              /* ラインの長さ */
  height: 2px;              /* ラインの太さ */
  background-color: #87C16F;   /* ラインの色 */
  margin: 30px auto;         /* 見出し上下の間隔と中央寄せ */
}



main h2 span {
	display:block;
	font-size:0.5em;
	padding-top:1em;
	letter-spacing:0.2em;
}




/* H2 ラインの色 */
main h2.h2_pink::before,main h2.h2_pink::after {background-color: #E07A84; }



main h3 {
	font-size: 32px;
	margin-bottom:1em;
	color:#5B7F4A;
}

main h4{
	font-size: 24px;
	margin-bottom:0.5em;
	color:#5B7F4A;
	border-left:5px solid #87C16F;
	padding:0.25em 0 0.25em 0.5em;
	text-align:left;
}




main h4 span{font-size:0.6em;}


main h5{
	font-size: 22px;
	margin-bottom:0.5em;
	color:#E07A84;
}

main h6{font-size: 22px;color:#7F4752;margin:0.5em 0;}

main p {line-height:1.7; margin-bottom:0.5em;}











/*style*/

.lead {font-size:1.2em;line-height:1.75em; text-align:center;}

.freame,
.box li div{border-radius: 10px; padding:1.5em;}
.box li {padding-bottom:1em;}
.box li div {background-color:#F5F3ED;height:100%;box-sizing: border-box;  }
.box li div p {line-height:1.5; font-size:0.95em; margin-top:1em;}

.d-ib {display: inline-block;}

/* テーブル */
table.table,.table td,.table th {
    border-collapse: collapse;
    border:1px solid #F5F3ED;
	padding:5px;
	font-size:1em;
	background-color:#fff;
    }

.table th {background-color:#ede7dd;}
.table th span { font-size:0.9em; font-weight:normal;display: inline-block;}

table.houyou-table,
table.houyou-table th,
table.houyou-table td {text-align: center;}
table.houyou-table td:nth-child(1) {text-align: left;   }

/* dlリスト */
dl.list dt {text-align:left;border-left:5px solid #87C16F; font-size:1.1em; color:#5B7F4A;}
dl.list dt,dl.list dd { padding:0.5em;}




/* 背景がベージュの時 */
.bg_beige h2::before,
.bg_beige h2::after { background-color: #5EC2DD;}
.bg_beige .box li div,
.bg_beige div.freame  {background-color:#fff;}
.bg_beige h4{border-color:#5EC2DD; color:#37727F;}
.bg_beige dl.list dt { border-color:#5EC2DD; color:#37727F;}
.bg_beige h3{ border-color:#5EC2DD; color:#37727F;}


@media screen and (max-width:1500px) {
.in h1,main h2 {font-size: 38px;}
}


@media screen and (max-width:1000px) {
.in h1,main h2 {font-size: 32px;}
main h3 {font-size: 28px;}
.table td,.table th {font-size:0.7em;}
}


@media screen and (max-width:768px) {
.contents {
	position: relative;
	top: 58px;
}

section{ padding:2%; 0;scroll-margin-top:40px;}

main h1,.in h1{
	font-size: 26px;
	margin-bottom:20px;
}

main h2 {font-size: 22px; padding-bottom:0.2em;margin:0 0 3% 0;}

main h2::before,
main h2::after {margin: 1em auto;}

main h3{
	font-size: 19px;
	margin-bottom:20px;
	border-bottom:2px solid #FFF;
	padding:0.5em 0;	
}

main h4{
	font-size: 18px;
	margin-bottom: 10px;
}

main h5{
	font-size: 17px;
	margin:0.5em 0;
	padding:0.5em ;
	background-color:#F5F3ED;
}

main h6{font-size: 16px;}

main p {
	margin-bottom: 0.5em;
}



/*in h1 bg*/
.h1_head  {background-image:url(/commons/img/sp_top_01.jpg);}
.h1_head h1{ margin-top:20px; font-size:20px;}



/*style*/
.lead {font-size:1em;line-height:1.5em; text-align:left;}

.freame,.box li div{padding:3%;}



}	





/*top スライド　swiper*/



.swiper-slide img{
	padding-top:140px;
	width:100vw;
	height:600px;
	object-fit: cover;
}

.swiper-slide {
	position: relative;
}
.swiper-slide p{
	position: absolute;
	bottom:0;
	background-color:rgba(255,255,255,0.5);
	color:#5F6C75;
	padding:0.5em 2em;
	font-size:30px;
	font-family: 'ShipporiMincho';
	font-weight:700;
	line-height:2.5;
	margin-bottom:1em;
}

.swiper-button-next {
	right:0;
}

@media screen and (max-width:768px) {	

/*top スライド　swiper*/

.swiper-slide img{
	padding-top:0px;
	height:400px;
}
.swiper-slide p{
	padding:0.5em 1em;
	font-size:18px;
	line-height:1.5;
	margin-bottom:4px;
}
}











/*petがなくなったら---*/
#pet .box li p {text-align:left;}


/*葬儀の流れ---*/
.nagare li {
  position: relative;
  display: block;
  margin:0 0 1em 0;
  padding: 7px 10px;
  width:100%;
  max-width: 100%;
  background: #F5F3ED;
  text-align:center;
  border-radius: 10px;
}



.nagare li:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #F5F3ED;

}

.nagare li:last-child:before { display:none;}
#pet h3,
.nagare h3 {color:#E07A84;padding:0.5em; text-align:center; font-size:22px; margin-bottom:0.5em; font-weight:500;}
#pet h3 span,#flow h3 span {background-color:#E07A84; display:block; padding-top:0.7em; width:2.7em; height:2em; margin:0 auto 5px auto; border-radius:50%; color:#fff;}
#flow .flow_list li { width:49%; margin:0 0.5% 1% 0.5%; border:4px solid #CFECC4;box-sizing: border-box;}
.nagare li p {font-size:0.9em;}

/*地域ページのながれ---*/
ul.flex_50_ul .nagare li {width:95%;}

/*プラン---*/
#plan table h5 {color:#fff; padding:0.5em; margin:0.1em; background-color:#5EC2DD; border-radius:10px;}


/*エリア---*/
#area a { display: inline-block;}




/*葬儀・火葬施設---*/
#facility .freame li h5 { padding:2px; border:1px solid #fff;}
#facility .freame li h5 a { padding:2px;color:#fff; display:block;}
#facility .freame li h5 a:hover { color:#df827c; background-color:#FFF;}
#facility #list li { width:19%;margin-right:1%;}
#facility #list h6 span,#facility .area h6 span {margin-right:0.5em;}





	





}

@media screen and (max-width:1000px) {
#scene > .flex_wrap li{
    width:24.25%;
}
}
@media screen and (max-width:768px) {	


.top .h1_head,.in .h1_head {
	padding:1em 0;
}


.h1_head h1 span {
	font-size:0.8em;
	padding:0 0.5em;
	line-height:1;
}





/*特色---*/

#features li.flex_w25{border:0px; width:100%;margin-bottom:1em;}
#features li{background-size:50%;}
#features h3{ padding:0.5em; height:3em;}



/*葬儀の流れ---*/
#flow .nagare li {width:94%;}
#flow h3 {font-size:18px; }
#flow .nagare p {text-align:left;}


/*プラン---*/
#plan table h5 { font-size:0.9em;height:2.5em;}

/*エリア---*/
.top #area img {width:90%; height:auto; margin:5%;}



/*葬儀・火葬施設---*/
#facility .freame ul {display:flex;flex-direction:row;height:auto;}
#facility .freame li { width:100%; margin-right:0%;}
#facility #list li { width:48%;margin:1%;}
#facility #list li p {font-size:0.8em;}



/*お客様の声---*/	
#voice .flex_33_ul li img {width:98%; margin:0 1%;}
	

/*会社概要---*/	
#link p {padding:0;}

}




/*footer
========================================*/



#footer {
	text-align: center;

}

#footer div.innr {

	width:100%;
}
#footer .btn li{display: inline-block;}

#footer .btn a{
	font-size:0.8em;
	padding:0.5em;
	margin: 0.5em auto;
}
#footer .copy{font-size:0.7em; padding: 0.5em;}

#footer .adress {text-align:left;line-height:1.5em; padding-bottom:1em;}
#footer .adress span{ margin-right:1em; display:inline-block; }


#pagetop {
	display: none;
	position: fixed;
	bottom: 15px;
	right: 15px;
	width: 50px;
	height: 50px;
	line-height: 60px;
	border-radius:50%;
	text-align: center;
	cursor: pointer;
	z-index: 100;
	background-color: #5F6C75;
	align-items: center;
    justify-content: center;
}
#pagetop i {
	color: #FFF;
	font-size: 20px;
}
#pagetop:hover {
	background-color: #5EC2DD;
}

.footer_tel,.footer_contact {
	display:none;
}



@media screen and (max-width:768px) {

#footer .adress { padding:0 1em 1em 1em;}
#footer .btn a{ width:90%;}
/*bnr*/
#footer .bnr img{width: 90%; height: auto; padding: 5%;}



#pagetop {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 10%;
	height: 40px;
	line-height: 60px;
	border-radius:0;
	text-align: center;
	cursor: pointer;
	z-index: 100;
	background-color: #5EC2DD;
	align-items: center;
    justify-content: center;
}
.footer_tel,.footer_contact {
	display:block;
	position:fixed;
	bottom:0;
	text-align:center;
	font-size:16px;
	background:#E07A84;
	margin:0;
	width: 90%;
	height: 40px;
	line-height: 40px;
	bottom: env(safe-area-inset-bottom, 0);
}
	
	
.footer_contact	{
	right: 10%;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;

}


.footer_tel i,.footer_contact i{
	color:#FFF;
	margin:0 10px;
}

.footer_tel a,.footer_contact a {
	color:#FFF;
	font-family: 'ShipporiMincho',"serif";
	font-weight:400;
}
	
	


}