@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}



/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 15px;	/*基準となるフォントサイズ。*/
}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 14px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/

body {
	font-family: "M PLUS 1", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-weight: 300;
	font-optical-sizing: auto;
	letter-spacing: 0.1rem;
	text-indent: 0.1rem;
	-webkit-text-size-adjust: none;
	margin: 0;padding: 0;
	line-height: 2.5;		/*行間*/
	background: #5a9545;		/*背景色*/
	color: #fff;			/*文字色*/
}

/* スマホで横にカタカタ動かないようにする */
html,
body{
  max-width: 100%;
  overflow-x: hidden;
}


/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li {margin: 0;padding: 0;}
nav ul {list-style: none;}
h1,h2,h3,h4 {font-weight: 400;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
strong {font-weight: 500;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #fff;	/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
}


/*header（ロゴとメニューが入ったブロック）
---------------------------------------------------------------------------*/
header {
	width: 250px;		/*幅*/
	padding: 0 2vw;		/*ヘッダー内の余白。上下、左右への順番。*/
	margin-top: 3vw;	/*ヘッダーの上に空けるスペース*/
	text-align: center;	/*テキストをセンタリング*/
}

@media screen and (max-width: 899px){
  header{
    margin-top: 5vw;   /* スマホだけ余白をつける */
  }
}

@media screen and (min-width:900px) {
  header {
    position: fixed;
    left: 0px;
    top: 20px;
    /* margin-top はなくてOK（上の 0 が効く） */
  }
}


/*ロゴ*/
header #logo img {display: block;}
header #logo {
	padding: 10px;margin: 0;
}

/*ロゴ下の小文字*/
header #logo span {
	display: block;
	font-size: 0.7rem;	/*文字サイズを70%に*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	header {
		position: fixed;	/*スクロールしても動かないようにする設定*/
		left: 0px;
		top: 0px;
    margin-top: 0;     /* ← この1行を追加（PCだけ上の余白ゼロ） */

	}

	}/*追加指定ここまで*/

	/*画面の高さが500px以下の追加指定*/
	@media screen and (max-height:800px) {

	header {
		position: absolute;	/*メニューが切れて見えなくならないように、fixedを中止する*/
	}

	}/*追加指定ここまで*/


/*mainブロック（右側のsectionを囲むブロック）
---------------------------------------------------------------------------*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	main {
		margin-left: 250px;	/*headerのwidthに合わせる*/
	}

	}/*追加指定ここまで*/


/*main内のh2*/
main h2 {
	font-size: 1.8rem;	/*文字サイズを2倍*/
  line-height: 1.6;   /* ← 単位なしがおすすめ（= 2rem × 1.6） */
}

/*main内のh3*/
main h3 {
	font-size: 1.3rem;	/*文字サイズを1.5倍*/
}



/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/* PC では常に表示しておく */
#menubar{
  display:block;
}

/* スマホ幅のときだけ、ハンバーガーで開閉する */
.small-screen #menubar{
  display:none;                 /* 通常は隠す */
}
.small-screen #menubar.display-block{
  display:block;                /* ハンバーガーONで表示 */
}



/*メニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar ul {
	margin: 3rem 0;	/*メニューブロックの外側に空けるスペース*/
}

/*メニュー一個あたり*/
#menubar nav a {
	text-decoration: none;
	display: block;
	background: #5a9545;                         /* 緑背景に変更 */
	border: 1px solid rgba(255,255,255,0.25);    /* うっすら白い枠 */
	color: #fff;
	padding: 0.6rem 0.7rem;
	margin: 0.45rem 0;
	border-radius: 5px;
}


/*マウスオン次*/
#menubar nav a:hover {
	background: rgba(0,0,0,0.9);	/*背景色。透明度を変更して濃くします。*/
	border: 1px solid rgba(255,255,255,0.9);	/*枠線。透明度を変更して濃くします。*/
}

/*900px以下画面でのメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 80px;
	background: rgba(0,0,0,0.8);		/*背景色*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}
.small-screen #menubar ul {
	margin: 3rem;	/*メニューブロックの外側に空けるスペース*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 0;			/*右からの配置場所指定*/
	top: 0;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background: #d30c44;	/*背景色*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*メニュー内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	justify-content: center;
}
ul.icons li {
	margin-right: 10px;	/*アイコン同士の余白*/
}
ul.icons i {
	font-size: 20px;	/*Font Awesomeのアイコンサイズ*/
}


/*section
---------------------------------------------------------------------------*/
/*フェード設定*/
.section::before {
  opacity: 1;              /* 初期状態では非表示 */
  transition: opacity 1s;  /* 1秒かけてフェードイン/フェードアウト */
}

/* 共通：背景レイヤー */
.body-bg-layer {
  /* position: fixed; などで全画面に敷く要素 */
}

/* デフォルト（section1 用） */
body[data-active-section="section1"] .body-bg-layer {
  /* section1 用の背景 */
}

body[data-active-section="section2"] .body-bg-layer {
  /* section2 用の背景 */
}

body[data-active-section="section3"] .body-bg-layer {
  /* section3 用の背景 */
}

/* …という感じで増やす */

/*section要素*/
section {
	padding: 2vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
}

/*４つのsectionブロックの共通設定*/
#section1,#section2,#section3,#section4 {
	min-height: calc(100dvh - 50px);	/*最低の高さ。100dvhは画面の高さ100%のこと。50pxは下のmarginの値。*/
	margin-bottom: 50px;	/*ボックスの下に空けるスペース*/
	padding: 5vw;			/*ボックス内の余白*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	#section1,#section2,#section3,#section4 {
		border-radius: 3vw 0 0 3vw;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}

	}/*追加指定ここまで*/


/*背景画像を置く為の設定*/
#section1::before,#section2::before,#section3::before,#section4::before {
	content: '';
	position: fixed;z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*section1の設定*/
#section1 {
	color: #fff;	/*文字色*/
}
#section1::before {
	background: url('../images/section1.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*section2の設定*/
#section2 {
	background-color: rgba(59,96,94,0.6);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section2::before {
	background: url('../images/section2.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*section3の設定*/
#section3 {
	background-color: rgba(100,88,79,0.6);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section3::before {
	background: url('../images/section3.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*section4の設定*/
#section4 {
	color: #fff;	/*文字色*/
}
#section4::before {
	background: #437737;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
}

	/*縦向き端末から見た場合に背景画像をチェンジする*/
	@media (orientation: portrait) {

	#section1::before {
		background-image: url('../images/section1_portrait.jpg');
	}
	#section2::before {
		background-image: url('../images/section2_portrait.jpg');
	}
	#section3::before {
		background-image: url('../images/section3_portrait.jpg');
	}

	}/*追加指定ここまで*/

/*背景色を入れない場合（画像だけを表示したい場合）*/
.no-bgcolor {background-color: transparent !important;}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.8rem;
	text-align: center;		/*内容をセンタリング*/
	padding-bottom: 1rem;
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
	padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 0.5rem;		/*上下、左右へのブロック内の余白*/
	width: 6rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: rgba(255,255,255,0.8);		/*背景色*/
	color: #333;			/*文字色*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	}/*追加指定ここまで*/


/*list-grid（gallery.htmlでサムネイルを表示している部分の設定です）
---------------------------------------------------------------------------*/
/*listブロックを囲む外側のボックス*/
.list-grid-trimming {
	display: grid;
	grid-template-columns: repeat(4, 1fr);	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	gap: 1rem;	/*マージン的な数値。サムネイル間を１文字分あけます。*/
}

/*ボックスを正方形にトリミングする為の指定なので変更しない。*/
.list-grid-trimming .list {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 100%;
}
.list-grid-trimming .list a {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.list-grid-trimming .list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-grid-trimming .list img:hover {
	transform: scale(1.1);	/*1.1倍に拡大*/
	filter: contrast(1.3);	/*コントラストを1.3倍*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 0.2s 0.2s both;	/*一瞬ボタンが出ちゃうのを隠す為の応急措置*/
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #000;border: 1px solid #fff;border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.color-check, .color-check a {color: #ffcf0d;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}/*画面幅900px以上の追加指定ここまで*/

/* =========================
   料金セクション UI（サイズ切替/カード）
   ========================= */
.section.pricing { --gap: 12px; }
.size-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 1rem 0 1.25rem;
}
@media (min-width: 700px){
  .size-switch { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1100px){
  .size-switch { grid-template-columns: repeat(9, 1fr); }
}
.size-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: .55rem .8rem;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.2;
  font-size: .95rem;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.size-btn:hover{ background: rgba(0,0,0,.55); }
.size-btn.is-active{
  background: #d30c44;
  border-color: #fff;
  font-weight: 500;
}

/* 料金カード */
.price-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 700px){
  .price-cards{ grid-template-columns: repeat(1,1fr); }
}
@media (min-width: 1100px){
  .price-cards{ grid-template-columns: repeat(3,1fr); }
}
.price-cards .card[hidden]{ display: none !important; }

.card{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px;
  overflow: clip;
  backdrop-filter: blur(2px);
}
.card-body{ padding: 1rem 1rem 1.1rem; }
.card .row{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .75rem;
  align-items: baseline;
  padding: .45rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.18);
}
.card .row:first-child{
  grid-template-columns: 1fr;
  border-bottom: 0;
  padding-top: 0;
  margin-bottom: .25rem;
}
.card .label{ opacity: .95; }
.card .price{
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* 注意書き */
.section.pricing .note{
  margin-top: .8rem;
  padding: .6rem .8rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
}

/* =========================
   祈念品ギャラリー（4→レスポンシブ）
   ========================= */
.list-grid-trimming{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 700px){
  .list-grid-trimming{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px){
  .list-grid-trimming{ grid-template-columns: repeat(4, 1fr); }
}

/* =========================
   モーダル（問い合わせタブ）
   ========================= */
.inquiry-tab{
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 120;
  border: none;
  border-radius: 999px;
  padding: .9rem 1.1rem;
  background: #d30c44;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.inquiry-modal{
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
}
.inquiry-modal.open{ display: block; }
.inquiry-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.inquiry-panel{
  position: absolute;
  inset: 6vh 5vw auto 5vw;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 1rem;
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
@media (min-width: 900px){
  .inquiry-panel{
    inset: 8vh 12vw auto 12vw;
    padding: 1.1rem 1.2rem;
  }
}
.inq-close{
  position: absolute;
  right: .4rem;
  top: .2rem;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  padding: .3rem .5rem;
  cursor: pointer;
}



/* =========================
   料金（#section3 .pricing）
   ========================= */
.section.pricing { --gap: 12px; --card-bg: rgba(0,0,0,.45); --card-bd: rgba(255,255,255,.32); }
.section.pricing * { box-sizing: border-box; }
.section.pricing h2 { margin-top: 0; }

/* サイズ切替ボタン */
.size-switch{
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
  margin: 1rem 0 1.25rem;
}
@media (min-width: 700px){ .size-switch{ grid-template-columns: repeat(5,1fr); } }
@media (min-width: 1100px){ .size-switch{ grid-template-columns: repeat(9,1fr); } }

.size-btn{
  appearance: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(0,0,0,.35);
  color: #fff; padding: .6rem .8rem; border-radius: 7px;
  font: inherit; line-height: 1.2; text-align: center;
  transition: background .2s ease, border-color .2s ease, transform .06s ease-in-out;
}
.size-btn:hover{ background: rgba(0,0,0,.55); }
.size-btn.is-active{ background: #d30c44; border-color: #fff; font-weight: 500; }
.size-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* 料金カードグリッド */
.price-cards{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){ .price-cards{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px){ .price-cards{ grid-template-columns: repeat(3,1fr); } }

/* data-size フィルタ用（JSで hidden が付く想定） */
.price-cards .card[hidden]{ display: none !important; }

/* カード */
.card{
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 12px;
  overflow: clip; /* 角丸で中身を切る */
  backdrop-filter: blur(2px);
}
.card-body{ padding: 1rem 1rem 1.1rem; }

/* 行レイアウト */
.card .row{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .75rem;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.2);
}
.card .row:first-child{
  grid-template-columns: 1fr;
  border-bottom: 0;
  padding-top: 0; margin-bottom: .25rem;
}

/* テキスト */
.card .label{ opacity: .95; }
.card .price{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* 注意書き */
.section.pricing .note{
  margin-top: .9rem;
  padding: .7rem .9rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
}

/* =========================
   柩かご料金（#section3b .sizes）
   ========================= */
.section.sizes { --gap: 14px; --tile-bg: rgba(0,0,0,.42); --tile-bd: rgba(255,255,255,.28); }
.section.sizes * { box-sizing: border-box; }
.section.sizes h2 {
  margin: 0 auto 1rem;  /* 左右オートで中央に */
  display: inline-block; /* 要素自体を真ん中に持ってくる */
  text-align: center;
}


/* タイルグリッド */
.size-tiles{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;  /* 最小幅：1列 */
}

@media (min-width: 700px){
  .size-tiles{
    grid-template-columns: repeat(2, 1fr); /* 700px〜：2列 */
  }
}

@media (min-width: 1100px){
  .size-tiles{
    grid-template-columns: repeat(5, 1fr); /* 1100px〜：5列 */
  }
}

/* タイル本体 */
.tile{
  background: var(--tile-bg);
  border: 1px solid var(--tile-bd);
  border-radius: 12px;
  padding: 1rem .95rem 1.05rem;
  display: grid; gap: .35rem;
  min-height: 100%;
}
.tile h3{ margin: 0; }

/* バッジ */
.size-badge{
  display: inline-block;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .2rem .55rem;
  border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.25);
}

/* 明細 */
.dim{ opacity: .9; font-size: .95rem; line-height: 1.6; }
.spec{ opacity: .95; font-size: .95rem; }

/* 価格を強調 */
.tile-price{
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.15rem;
  justify-self: end; /* 右寄せ */
  white-space: nowrap;
}

@media screen and (min-width:900px){
  #section1,#section2,#section3,#section4{
    border-radius: 3vw 0 0 3vw;
  }
}


/* --- 重なり回避（最下部に追加） --- */
:root{
  --fab-h: 52px;   /* 見積もりボタンの高さ（目安） */
  --fab-gap: 12px; /* 2つのボタンのすき間 */
}

/* 見積もりボタン：右下固定 */
.inquiry-tab{
  position: fixed !important;
  right: 16p !important;
  bottom: 16px !important;
  z-index: 10000 !important;
}

/* TOPへ戻るボタン：見積もりの上にずらす（縦積み） */
.pagetop a{
  right: 16px !important;
  bottom: calc(16px + var(--fab-h) + var(--fab-gap)) !important;
  z-index: 9999 !important;
}

/* モバイルで少しゆとりを増やす（任意） */
@media (max-width: 480px){
  :root{ --fab-h: 58px; --fab-gap: 14px; }
  .inquiry-tab{ right: 12px!important; bottom: 12px !important; }
  .pagetop a{ right: 12px !important; }
}

/* もし見積もりを縦タブ版（画面右中央）に戻す場合は、下を有効化して下部の競合を無効にする */
/*
.inquiry-tab{
  writing-mode: vertical-rl; text-orientation: mixed;
  top: 50% !important; bottom: auto !important; transform: translateY(-50%);
}
.pagetop a{ bottom: 16px !important; } 
*/

/* ベース（PC） */
.biz-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.7;
  border: 1px solid #e5e7eb;
}
.biz-table th,
.biz-table td{
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.biz-table th{
  width: 14em;                 /* ラベル列の幅 */
  background: #f8fafc;
  text-align: left;
  font-weight: 600;
  color: #374151;
}
.biz-table td{
  background: #f8fafc;
  color: #111827;
  overflow-wrap: anywhere;      /* 長い文でも折り返し */
}

/* スマホ：行ごとに2列グリッドへ */
@media (max-width: 640px){
  .biz-table{ border: none; }
  .biz-table tr{
    display: grid;
    grid-template-columns: 8.5em 1fr; /* 左=ラベル / 右=値 */
    gap: 6px 10px;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 0;
  }
  .biz-table th,
  .biz-table td{
    border: none;
    padding: 0 0;
  }
  .biz-table th{
    background: transparent;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .biz-table td{
    font-size: 1rem;
    line-height: 1.7;
  }
}

/* 文字を少し大きく見せたい場合（任意） */
@media (max-width: 640px){
  .biz-table{ font-size: 1.05rem; }
}

.Inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

p{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}

/* フローチャート用に横線は消す */
.List-Item {
  border-top: none;
  width: 100%;
}

@media screen and (max-width: 540px) {
  .List-Item {
    border-top: 0;
  }
}
.List-Item:nth-of-type(1) {
  border-top: 0;
}
.List-Item-Content {
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  max-width: 1100px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 540px) {
  .List-Item-Content {
    padding-top: 15px;
    padding-bottom: 15px;
    flex-wrap: wrap;
  }
}
.List-Item-Content.one {
  padding-top: 0;
}
.List-Item-Content-Number {
  position: relative;
  margin-right: 40px;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #5bc8ac;
  color: #fff;
  font-size: 36px;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Number {
    margin-right: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
  }
}

.List-Item-Content-Title {
  margin-right: 48px;
  flex-basis: 298px;
  color: #5bc8ac;
  font-size: 24px;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Title {
    margin-right: 0;
    max-width: 230px;
    font-size: 18px;
  }
}
.List-Item-Content-Description {
  line-height: 1.5;
  font-size: 16px;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Description {
    margin-left: 60px;
    max-width: 260px;
    font-weight: normal;
    font-size: 13px;
  }
}

/* =========================
   ペットのお見送りのながれ（フローチャート）
   ========================= */

.Inner{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.List-Item{
  width: 100%;
}

.List-Item-Content{
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
}

.List-Item-Content.one{
  padding-top: 0;
}

@media screen and (max-width: 540px){
  .List-Item-Content{
    padding-top: 15px;
    padding-bottom: 15px;
    flex-wrap: wrap;
  }
}

/* 丸い番号（正円＋固定幅カラム） */
.List-Item-Content-Number{
  position: relative;
  flex: 0 0 80px;      /* 幅を固定 */
  margin-right: 30px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  background: #5bc8ac;
  color: #fff;
  font-size: 36px;
}
.List-Item-Content-Number{
  position: relative;
  z-index: 1;   /* 丸を前面に */
}

@media screen and (max-width: 540px){
  .List-Item-Content-Number{
    flex: 0 0 40px;
    margin-right: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
  }
}






/* 緑のタイトル枠：横幅をそろえる */
.List-Item-Content-Title{
  flex: 0 0 240px;          /* 全ステップ共通の横幅 */
  max-width: 240px;
  margin-right: 40px;
  padding: .4rem .8rem;
  background: #5bc8ac;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.4;
  border-radius: 4px;
}

@media screen and (max-width: 540px){
  .List-Item-Content-Title{
    flex: 0 0 220px;
    max-width: 220px;
    margin-right: 0;
    font-size: .95rem;
    line-height: 1.4;
  }
}

/* 説明文 */
.List-Item-Content-Description{
  line-height: 1.7;
  font-size: 16px;
}

@media screen and (max-width: 540px){
  .List-Item-Content-Description{
    margin-left: 60px;  /* 丸の分だけ右にずらす */
    max-width: 260px;
    font-size: 13px;
  }
}

/* フローチャート：緑枠タイトルの文字サイズ・行間調整 */
.List-Item-Content-Title{
  margin-right: 48px;
  flex-basis: 298px;
  /* 背景色と文字色はそのまま（上の指定が効いている） */
  font-size: 1.1rem;   /* 全体的に少し小さめ */
  line-height: 1.4;    /* 行間をキュッと締める */
  padding: 0.5rem 0.8rem; /* 余白はお好みで調整 */
}

/* スマホ時はさらに少しだけ小さく */
@media screen and (max-width: 540px) {
  .List-Item-Content-Title{
    font-size: 0.95rem;
    line-height: 1.4;
    margin-right: 0;
    max-width: 230px;
  }
}



/* === スマホ幅用（見た目調整） ====================== */
@media screen and (max-width: 700px){

  /* 1行目：番号＋タイトル、2行目：説明文 */
  .List-Item-Content{
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* 丸い番号を小さく・正円のまま */
  .List-Item-Content-Number{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    margin-right: 12px;
    margin-bottom: 4px;
  }



  /* 緑の枠：幅をそろえて、少し小さめの文字＋行間 */
  .List-Item-Content-Title{
    flex: 1 1 calc(100% - 44px);   /* 「番号＋少しの余白」を引いた幅 */
    max-width: none;
    margin-right: 0;
    padding: .35rem .6rem;
    font-size: .95rem;
    line-height: 1.4;
  }

  /* 説明文は2行目で左をそろえる */
  .List-Item-Content-Description{
    flex-basis: 100%;
    margin-left: 44px;             /* 番号＋余白ぶんだけ右に寄せる */
    margin-top: .2rem;
    max-width: none;
    font-size: .85rem;
    line-height: 1.6;
  }
}

/* =========================
   section1 ふわっと・フワフワ画像
   ========================= */

/* 画像コンテナ：中央寄せ */
#section1 .hero-fuwafuwa{
  text-align: center;
  margin: 2rem auto 0;
}

/* 初期状態：透明＋少し下にずらす */
#section1 .hero-fuwafuwa-img{
  max-width: 1100px;
  width: 95%;
  opacity: 0;
  transform: translateY(40px);
}

/* スマホ時：縦画像を少し大きめ＋左に寄せる */
@media (max-width: 768px){
  #section1 .hero-fuwafuwa{
    padding-right: 0;           /* 右余白で小さくなっていた分をリセット */
  }

  #section1 .hero-fuwafuwa-img{
    max-width: 500px;           /* 画像の上限サイズ（好みで調整） */
    width: 100%;                /* 画面幅より少し大きめに表示 */
    margin-left: -10%;          /* 少し左にずらして、右側のボタンと被りにくくする */
  }
}



/* is-show が付いた時だけフワッと動く */
#section1 .hero-fuwafuwa-img.is-show{
  animation: fadeUpFluffy 2.4s ease-out forwards;
}

@keyframes fadeUpFluffy{
  0%{
    opacity: 0;
    transform: translateY(40px);
  }
  40%{
    opacity: 1;
    transform: translateY(0);
  }
  70%{
    opacity: 1;
    transform: translateY(-10px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

/* 画面が狭いときは少しゆっくり */
@media (max-width: 480px){
  #section1 .hero-fuwafuwa-img.is-show{
    animation-duration: 2.8s;
  }
}

/* PCでは、背景画像を「メインエリアだけ」に制限する */
@media screen and (min-width:900px){
  #section1::before,
  #section2::before,
  #section3::before,
  #section4::before{
    left: 250px;                     /* ヘッダー（メニュー）幅と同じ */
    width: calc(100% - 250px);       /* 残りを背景画像にする */
  }
}

/* =========================
   section1 電話案内ボックス
   ========================= */
.hero-call{
  max-width: 520px;
  margin: 1.8rem auto 0;
  padding: 0.9rem 1.2rem 1.1rem;
  background: rgba(0,0,0,0.55);   /* 半透明の黒ベール */
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.hero-call p{
  margin: 0 0 .3rem;
}

.hero-call strong{
  font-size: 1.05rem;
}

/* 電話ボタン */
.hero-tel-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  background: #d30c44;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

.hero-tel-btn i{
  font-size: 1rem;
}

.hero-tel-btn:hover{
  background: #b00a3a;
}

/* 「受付時間～」を少し小さく */
.hero-call p:last-child{
  font-size: .9rem;
}


/* ===== セクションごとのベール最終調整 ===== */

/* section1 はベール無し（猫写真クリア） */
#section1::after{
  background: transparent !important;
}

/* section2 は薄いベール */
#section2::after{
  background: rgba(0,0,0,.15) !important;
}

/* section3 は少し濃いベール（好みで調整可） */
#section3::after{
  background: rgba(0,0,0,.22) !important;
}

/* section4 は不要なら透明にしておく */
#section4::after{
  background: transparent !important;
}

/* =========================
   ペットが亡くなったら（jyunbi）専用デザイン
   ========================= */

#jyunbi{
  background: rgba(255,255,255,0.95);
  color: #1f2933;
  max-width: 980px;
  margin: 0 auto 48px;
  padding: 2.6rem 7vw 3rem;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* メイン見出し */
#jyunbi h2{
  margin-top: 0;
  margin-bottom: 1.8rem;
  font-size: 1.9rem;
  letter-spacing: .06em;
  color: #0f172a;
  text-align: left;
  border-left: 5px solid #5a9545;
  padding-left: .9rem;
}

/* セクション見出し */
#jyunbi h3{
  margin-top: 2.2rem;
  margin-bottom: .9rem;
  font-size: 1.25rem;
  color: #14532d;
  border-left: 3px solid rgba(20,83,45,.4);
  padding-left: .7rem;
}

/* 小見出し（Q&Aなど） */
#jyunbi h4{
  margin-top: 1.6rem;
  margin-bottom: .4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #374151;
}

/* 本文・補足 */
#jyunbi p{
  color: #1f2933;
}
#jyunbi .small{
  color: #6b7280;
}

/* 箇条書き：普通の黒文字＋黒ポチに戻す */
#jyunbi ul{
  padding-left: 1.4em;
  margin: .3rem 0 1.2rem;
}
#jyunbi ul li{
  list-style: disc;
  margin-bottom: .75rem;
}

/* 電話・中央揃えの段落を少し強調 */
#jyunbi p.c{
  margin: 1.6rem 0;
}
#jyunbi p.c strong{
  display: block;
  margin-bottom: .4rem;
  font-size: 1.02rem;
}
#jyunbi p.c a[href^="tel:"]{
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: .06em;
}
#jyunbi p.c a[href^="tel:"]:hover{
  text-decoration: underline;
}

/* リンク色（読み物っぽく） */
/* jyunbi 内のリンク色（白背景用） */
#jyunbi a{
  color: #2563eb;          /* 好きな色でOK。濃い青など見える色に */
  text-decoration: underline;
}

#jyunbi a:hover{
  text-decoration: none;   /* 下線消したいならこのまま */
}

/* jyunbi：電話番号リンクだけ白にする */
#jyunbi .hero-call a[href^="tel:"],
#jyunbi p.c a[href^="tel:"]{
  color: #ffffff;
  text-decoration: none;
}


/* jyunbi：電話ボタンだけ白文字に戻す */
#jyunbi a.hero-tel-btn{
  color: #ffffff;
  text-decoration: none;
}

#jyunbi a.hero-tel-btn:hover{
  text-decoration: underline;
}

/* 図・写真：ほんのり影をつける */
#jyunbi figure{
  margin: 1.5rem auto;
  text-align: center;
}
#jyunbi figure img{
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

/* スマホで余白だけ少し圧縮 */
@media (max-width: 600px){
  #jyunbi{
    padding: 2.2rem 1.4rem 2.6rem;
    margin-bottom: 32px;
  }
  #jyunbi h2{
    font-size: 1.6rem;
  }
}
/* jyunbi 専用：問い合わせボタン */
#jyunbi .jyunbi-cta{
  margin: 2rem 0 0;
  text-align: center;
}

#jyunbi .jyunbi-btn{
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  background: #d30c44;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.85);
}

#jyunbi .jyunbi-btn:hover{
  background: #b00a3a;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transform: translateY(1px);
}

@media (max-width: 600px){
  #jyunbi .jyunbi-btn{
    width: 100%;
    max-width: 360px;
    font-size: .95rem;
  }
}
/* jyunbi：ぶら下げインデント用 */
#jyunbi .hang{
  padding-left: 1.5em;   /* 全体を少し右へ */
  text-indent: -1.5em;   /* 1行目だけ左へ戻す → 2行目以降がそろう */
}

/* =========================
   TOP 専用の調整（順番変更に伴う見た目整理）
   ========================= */

/* ファーストビューのCTAボタン */
.hero-cta{
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
}
.hero-btn{
  display: inline-block;
  padding: .75rem 1.6rem;
  border-radius: 999px;
  font-size: .95rem;
  letter-spacing: .06em;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.hero-btn.primary{
  background: #d30c44;
  border-color: rgba(255,255,255,.85);
  color: #fff;
  font-weight: 600;
}
.hero-btn.secondary{
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

@media (max-width: 480px){
  .hero-btn{
    flex: 1 1 100%;
    text-align: center;
  }
}

/* 読み物セクションは「明るい背景＋黒文字」に統一 */
#section2,
#section3,
#section5{
  background-color: rgba(247,250,244,0.96);
  color: #222;
}

/* 柩かご料金は料金セクションと近いトーンに */
#section3b{
  background-color: #345f32;
  color: #fff;
}

/* 2,3,4は背景画像のベールを外してスッキリさせる */
#section2::before,
#section3::before,
#section4::before{
  background: none;
}

/* 読み物セクション内のリンクカラー（念のため） */
#section2 a,
#section3 a,
#section5 a{
  color: #2563eb;
}

/* 祈念品ギャラリーの上に少し余白 */
#section5 .list-grid-trimming{
  margin-top: 1.4rem;
}

/* ヒーロー内の電話ボタン */
.hero-call{
  margin-top: 1.2rem;
}

.hero-tel-btn{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.8rem;
  border-radius: 999px;
  background: #d30c44;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.hero-tel-btn i{
  font-size: 1rem;
}

.hero-tel-btn:hover{
  background: #b00a3a;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transform: translateY(1px);
}

/* スマホ時は横いっぱいに */
@media (max-width: 480px){
  .hero-tel-btn{
    width: 100%;
    justify-content: center;
  }
}

/* jyunbi（ペットが亡くなったら）用：電話ボックスを少し明るく */
#jyunbi .hero-call{
  background: rgba(0,0,0,.12);      /* 濃いグレー → うすいグレー */
  color: #111827;                   /* 黒っぽい文字に */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

#jyunbi .hero-call p{
  color: inherit;                   /* p も黒にそろえる */
}

#jyunbi .hero-call strong{
  color: #111827;
}

/* =========================
   ご利用案内（about）用カードレイアウト
   ========================= */

#usage{
  background: rgba(255,255,255,0.97);
  color: #111827;
  max-width: 980px;
  margin: 0 auto 48px;
  padding: 2.4rem 7vw 3rem;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

/* メイン見出し */
#usage h2{
  margin-top: 0;
  margin-bottom: 1.8rem;
  font-size: 1.9rem;
  letter-spacing: .06em;
  color: #0f172a;
  border-left: 5px solid #5a9545;
  padding-left: .9rem;
}

/* 小見出し（番号付きのタイトルなど） */
#usage h3{
  margin-top: 2.2rem;
  margin-bottom: .8rem;
  font-size: 1.25rem;
  color: #14532d;
  border-left: 3px solid rgba(20,83,45,.45);
  padding-left: .7rem;
}

/* さらに細かい見出しがあれば */
#usage h4{
  margin-top: 1.4rem;
  margin-bottom: .4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #374151;
}

/* 本文・リスト */
#usage p,
#usage li{
  color: #111827;
  line-height: 1.9;
}
#usage .small{
  color: #6b7280;
}

/* 箇条書きは黒ポチに戻す */
#usage ul{
  padding-left: 1.4em;
  margin: .4rem 0 1.2rem;
}
#usage ul li{
  list-style: disc;
}

/* 番号付きリスト */
#usage ol{
  padding-left: 1.6em;
  margin: .4rem 0 1.4rem;
}

/* 表（biz-table）をカード風に */
#usage .biz-table{
  margin-top: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
#usage .biz-table th,
#usage .biz-table td{
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 14px;
}
#usage .biz-table th{
  background: #eef2ff;
  color: #1f2937;
  font-weight: 600;
}
#usage .biz-table td{
  color: #111827;
}

/* スマホ時、余白だけ少し圧縮 */
@media (max-width: 600px){
  #usage{
    padding: 2rem 1.4rem 2.6rem;
    margin-bottom: 32px;
  }
  #usage h2{
    font-size: 1.6rem;
  }
}

/* ご利用案内内のリンク色調整 */
#usage a{
  color: #2563eb;               /* 落ち着いた青 */
  text-decoration: underline;   /* リンクだと分かるように */
}
#usage a:hover{
  text-decoration: none;
}
/* =========================
   火葬車について（写真まわり）
   ========================= */
#section6 .vehicle-photo{
  margin: 1.8rem auto 2rem;
  max-width: 720px;
  text-align: center;
}

#section6 .vehicle-photo img{
  width: 200%;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

#section6 .vehicle-photo figcaption{
  margin-top: .7rem;
  font-size: .9rem;
  opacity: .9;
}

#section6{
  padding-bottom: 200px;  /* 今 190 前後なら 10〜20 だけ増やすイメージ */
}

/* =========================
   草・虹・犬猫：重なり順の最終調整
   ========================= */

/* footer-scene 自体は「層」にしない */
.footer-scene{
  z-index: auto !important;  /* ← ここで z-index:0 を打ち消す */
}

/* 虹だけいちばん奥へ（本文より後ろ） */
.footer-rainbow-wrap,
.footer-rainbow{
  z-index: -1;               /* マイナスなので本文より奥 */
}

/* 本文は 0（基準の層） */
main{
  position: relative;
  z-index: 0;
}

/* 草むら：本文より前 */
.footer-grass{
  z-index: 10;               /* = 本文より手前 */
}

/* 犬・猫：草むらよりさらに手前 */
.footer-pet{
  z-index: 11;
}


/* 火葬車セクション：虹より上で終わるように下に余白 */
#section6{
  padding-bottom: 190px;   /* 必要なら 170〜210px で微調整 */
}

/* 本文を虹より手前側に出すための保険 */
main{
  position: relative;
  z-index: 1;
}



/* 火葬車セクション：画像サイズ調整用 */
#section6 img {
  max-width: 360px;   /* ←ここだけ数字を変えれば大きさを調整できます */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 2rem;
}

/* 火葬車ページの本文を読みやすくする用 */
#section6 p,
#section6 li {
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.35),
    0 0 8px rgba(0, 0, 0, 0.35);
}
/* 火葬車セクション全体の下に余白を追加 */
#section6{
  padding-bottom: 180px;   /* 好みで 160〜200px くらいで微調整可 */
}

/* =========================
   スマホ用：草＋犬猫＋虹＋ボタンの微調整
   ========================= */
@media (max-width: 600px){

  /* 草＋虹＋犬猫 全体の高さを少し低めに */
  .footer-scene{
    height: 90px;
  }

  /* 草むらは少し低くしてリピート */
  .footer-grass{
    height: 55px;
    background-size: auto 55px;
  }

  /* 虹：少し小さくして、PCと同じ位置関係を維持 */
  .footer-rainbow-wrap{
    width: 200px;
    height: 200px;
  }
  .footer-rainbow{
    width: 200px;
  }

  /* 犬・猫：相対的に大きくなりすぎないよう縮小＋位置調整 */
  .footer-pet{
    bottom: 4px;
    height: 60px;
  }
  .footer-pet-dog{
    left: 16px;
  }
  .footer-pet-cat{
    left: 80px;
  }

  /* 火葬車の文章が虹の下に潜り込まないよう、下余白を少し増やす */
  #section6{
    padding-bottom: 170px;
  }

  /* ボタンが足元のイラストと被りにくいよう位置だけ微調整 */
  .inquiry-tab{
    right: 12px !important;
    bottom: 12px !important;
  }
  .pagetop a{
    right: 12px !important;
    bottom: calc(12px + var(--fab-h) + var(--fab-gap)) !important;
  }
}

/* =========================
   画面下：草むら＋犬猫＋虹（レイヤー分離版）
   ========================= */

/* 虹レイヤー：本文より奥（z-index:-1） */
.footer-rainbow-layer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  pointer-events: none;
  z-index: -1;      /* 本文(main)より奥へ */
}

/* 虹コンテナ：右下から生える */
.footer-rainbow-wrap{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  height: 260px;
  overflow: visible;
}

.footer-rainbow{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  height: auto;
  opacity: 0;
  transform-origin: 100% 100%;
  animation: footer-rainbow-arc 2.5s ease-out 1 forwards;
}

/* 草＋犬猫レイヤー：本文より手前（z-index:10） */
.footer-scene{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  pointer-events: none;
  z-index: 10;
}

/* 草むら：最前面レイヤーの中で一番奥 */
.footer-grass{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background-image: url("../images/grass.png");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 70px;
  z-index: 1;
}

/* 犬・猫：草より前 */
.footer-pet{
  position: absolute;
  bottom: 8px;
  height: 78px;
  width: auto;
  animation: pet-yurayura 3s ease-in-out infinite;
  z-index: 2;
}

.footer-pet-dog{
  left: 40px;
  animation-delay: 0.2s;
}
.footer-pet-cat{
  left: 120px;
  animation-delay: 0.5s;
}

/* 虹アニメーション（そのまま再利用） */
@keyframes footer-rainbow-arc{
  0%{
    opacity: 0;
    transform: rotate(90deg);
  }
  25%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: rotate(0deg);
  }
}

/* 犬猫のぷかぷかアニメ（そのまま再利用） */
@keyframes pet-yurayura{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

/* 本文(main)は基準レイヤー */
main{
  position: relative;
  z-index: 0;
}

/* =========================
   画面下：草むら＋犬猫＋虹（PC・スマホ共通）
   ========================= */

/* 本文(main)を基準レイヤーにする */
main{
  position: relative;
  z-index: 0;
}

/* 虹レイヤー：本文より奥（常に一番奥） */
.footer-rainbow-layer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  pointer-events: none;
  z-index: -1;      /* ← ここで main より奥に */
}

.footer-rainbow-wrap{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  height: 260px;
  overflow: visible;
}

.footer-rainbow{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  height: auto;
  opacity: 0;
  transform-origin: 100% 100%;
  animation: footer-rainbow-arc 2.5s ease-out 1 forwards;
}

/* 草＋犬猫レイヤー：本文より手前（虹より前） */
.footer-scene{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  pointer-events: none;
  z-index: 10;     /* main(0) より前、虹(-1) より後ろ */
}

/* 草むら：レイヤー内の奥 */
.footer-grass{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background-image: url("../images/grass.png");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 70px;
  z-index: 1;
}

/* 犬・猫：草よりさらに手前 */
.footer-pet{
  position: absolute;
  bottom: 8px;
  height: 78px;
  width: auto;
  animation: pet-yurayura 3s ease-in-out infinite;
  z-index: 2;
}

.footer-pet-dog{
  left: 40px;
  animation-delay: 0.2s;
}
.footer-pet-cat{
  left: 120px;
  animation-delay: 0.5s;
}

/* 虹アニメーション（既存のものを流用） */
@keyframes footer-rainbow-arc{
  0%{
    opacity: 0;
    transform: rotate(90deg);
  }
  25%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: rotate(0deg);
  }
}

/* 犬猫のぷかぷかアニメ（既存のものを流用） */
@keyframes pet-yurayura{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

/* =========================
   ボタンとの重なり調整（PC・スマホ共通）
   ========================= */

:root{
  --fab-h: 52px;   /* 見積もりボタン高さの目安 */
  --fab-gap: 12px; /* ボタン同士のすき間 */
}

/* 見積もりボタン */
.inquiry-tab{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 10000 !important;
}

/* ページトップボタン */
.pagetop a{
  position: fixed;
  right: 16px !important;
  bottom: calc(16px + var(--fab-h) + var(--fab-gap)) !important;
  z-index: 10001 !important;
}


/* =========================
   スマホ用：ヒーローロゴ
   ========================= */

/* 共通（まずは非表示にしておく） */
.hero-logo-sp{
  display: none;
}

/* スマホ幅のみ表示・位置決め */
@media (max-width: 768px){
  .hero-logo-sp{
    display: block;
    position: fixed;      /* 画面左上に固定 */
    left: 16px;
    top: 18px;
    z-index: 120;         /* 文字・背景より前、メニューより少し下くらい */
    pointer-events: none; /* ロゴでタップを邪魔しない */
  }
  .hero-logo-sp img{
    height: 40px;         /* ロゴの大きさ。大きければ数字を下げる */
    width: auto;
  }
}
/* ヒーローコピーを読みやすくする影 */
#section1 h2,
#section1 p{
  text-shadow:
    0 0 10px rgba(0,0,0,1.9),
    0 0 10px rgba(0,0,0,1.9);
}

/* スマホではヘッダーのロゴを隠す */
@media (max-width: 900px){
  header #logo{
    display: none;
  }
}

/* --- スマホ専用ヒーローロゴ --- */
.hero-logo-sp{
  display: none;          /* PCでは非表示 */
}

/* スマホだけ表示＆センター配置 */
@media (max-width: 900px){
  .hero-logo-sp{
    position: absolute;
    left: 50%;
    top: 32px;            /* ロゴの縦位置。高ければ数字を小さくする */
    transform: translateX(-50%);
    z-index: 15;          /* 背景より前、メニューよりは下でよければ 15〜20 くらい */
    width: 80%;
    max-width: 320px;
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease, transform .3s ease;
  }

  /* スクロール後に隠す用クラス */
  .hero-logo-sp.is-hidden{
    opacity: 0;
    transform: translate(-50%, -8px);
  }

  /* スマホではヘッダーの元ロゴは消す */
  header #logo{
    display: none;
  }
}

/* テンプレート提供クレジット（メニュー直下） */
.tp-credit{
  margin-top: 1rem;        /* メニューからの「距離」はここで調整する */
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: center;
}
.tp-credit a{
  color: inherit;
  text-decoration: none;
}

/* PC 幅でも、位置は header 内でメニューのすぐ下に出すだけ */
@media (min-width: 900px){
  header{
    /* すでにある指定にこれを足す（上の余白が欲しければ padding-top で調整） */
    margin-top: 0;          /* もし 5vw が邪魔なら 0 にする */
  }
}


#section-area .inner {
  max-width: 1000px;
  margin: 0 auto;
}


.section-area .area-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.section-area .area-text {
  flex: 1 1 320px;
}

.section-area .area-map {
  flex: 0 0 320px;
}

.section-area .area-map-placeholder {
  border: 1px dashed rgba(255,255,255,0.4);
  padding: 40px 20px;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.8;
}

.section-area .area-rules dt {
  font-weight: 700;
  margin-bottom: 4px;
}

.section-area .area-rules dd {
  margin: 0;
}

.section-area .area-note {
  font-size: 0.9rem;
  margin-top: 0.8em;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .section-area .area-flex {
    flex-direction: column;
  }
  .section-area .area-map {
    order: -1; /* スマホでマップを先に見せたい場合はこのまま／不要なら削除 */
  }
}


/* スマホ専用：細長い縦タブ（仮申し込み・お問い合わせ） */
@media (max-width: 768px){
  .inquiry-tab{
    position: fixed;
    right: 0;
    left: auto;
    top: 70%;                 /* 位置。高ければ 65〜70%、もっと下なら 75〜80% に */
    bottom: auto;
    transform: translateY(-50%);

    /* 縦長・細身にする部分 */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 52px;              /* タブの太さ */
    height: 230px;            /* 縦の長さ（好みで 200〜260 くらいに調整） */
    padding: .4rem .3rem;     /* 余白は細め */
    box-sizing: border-box;

    /* 角は丸くしない */
    border-radius: 0 !important;

    /* 文字の見え方 */
    display: flex;
    align-items: center;      /* 中央寄せ */
    justify-content: center;
    font-size: .9rem;
    line-height: 1.6;

    /* 影そのまま使いたければ残す */
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }
}


/* =========================
   移動費 料金カード
   ========================= */

.visit-fee{
  margin-top: 2.4rem;
}

.visit-fee h3{
  margin-bottom: .8rem;
  font-size: 1.35rem;
  border-left: 3px solid rgba(255,255,255,.7);
  padding-left: .7rem;
}

.visit-fee-lead{
  margin-bottom: 1.4rem;
  opacity: .9;
}

/* カードの並び */
.visit-fee-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px){
  .visit-fee-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px){
  .visit-fee-cards{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* カード本体 */
.visit-fee-card{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 14px;
  padding: .95rem 1rem 1.05rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* タグ（上部のラベル） */
.visit-fee-tag{
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.visit-fee-tag.free{
  background: #eab308;
  color: #1f2937;
}

/* 距離・金額・時間 */
.visit-fee-range{
  margin: .55rem 0 .2rem;
  font-size: 1rem;
  font-weight: 600;
}

.visit-fee-price{
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.visit-fee-time{
  margin-top: .2rem;
  font-size: .9rem;
  opacity: .9;
}

/* 備考 */
.visit-fee-note{
  margin-top: 1rem;
  font-size: .85rem;
  opacity: .9;
}

/* ご訪問エリア画像：レイアウト＋ふわっと */
/* ご訪問エリア画像：共通サイズ */
#section-area .area-badge{
  max-width: 260px;   /* ← ここを 260px くらいに戻す */
  width: 100%;
  height: auto;

  /* ふわっと用 初期値はそのまま */
  opacity: 0;
  transform: translateY(20px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition:
    opacity .7s ease,
    transform .7s ease;
}


/* 1枚目（鹿児島＋都城マップ）だけ大きく */
#section-area .area-badges img.area-badge:first-of-type{
  max-width: 420px;      /* 好みで 360〜450px の範囲で調整 */
}

/* 共通スタイル */
#section-area .area-badge{
  max-width: 260px;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(20px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition:
    opacity .7s ease,
    transform .7s ease;
}

/* 1枚目だけ大きく */
#section-area .area-badges img.area-badge:first-of-type{
  max-width: 420px;
}

/* ふわっと出現時 */
#section-area .area-badge.is-show{
  opacity: 1;
  transform: translateY(0);
}


  /* ふわっと用初期値 */
  opacity: 0;
  transform: translateY(20px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition:
    opacity .7s ease,
    transform .7s ease;
}

/* ふわっと出現時 */
#section-area .area-badge.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* 下段センター：「お伺いいたします！」 */
#section-area .area-badge:nth-child(3){
  grid-column: 1 / -1;   /* 1行ぜんぶ使う */
  justify-self: center;  /* 真ん中 */
  margin-top: 4px;
}

/* スマホは少し小さめに */
@media (max-width: 600px){
  #section-area .area-badges{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
  #section-area .area-badge{
    max-width: 400px;
  }
  #section-area .area-badge:nth-child(1){
    max-width: 240px;   /* スマホ用に少しだけ大きく */
  }
}


/* =========================
   料金表：スマホ用の最終調整
   ========================= */
@media (max-width: 768px){

  /* 見出し */
  #section3 .pricing h2{
    margin-top: 0;
    margin-bottom: .8rem;
    font-size: 1.5rem;
    text-align: center;
  }

  /* サイズ切替ボタン */
  #section3 .pricing .size-switch{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: .8rem 0 1rem;
  }

  #section3 .pricing .size-btn{
    border: 1px solid rgba(255,255,255,.65);
    background: rgba(0,0,0,.35);
    color: #fff;
    padding: .45rem .3rem;
    border-radius: 6px;
    font-size: .8rem;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }

  /* 料金カード本体 */
  #section3 .pricing .price-cards{
    display: grid;
    grid-template-columns: 1fr;   /* スマホは1列 */
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #section3 .pricing .card{
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 10px;
    padding: .8rem .9rem .9rem;
  }

  #section3 .pricing .card .row{
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: .5rem;
    align-items: baseline;
    padding: .4rem 0;
    border-bottom: 1px dashed rgba(255,255,255,.25);
  }

  #section3 .pricing .card .row:first-child{
    grid-template-columns: 1fr;
    border-bottom: none;
    padding-top: 0;
    margin-bottom: .25rem;
  }

  #section3 .pricing .card .label{
    font-size: .9rem;
  }

  #section3 .pricing .card .price{
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
  }

  /* 注意書き */
  #section3 .pricing .note{
    margin-top: .9rem;
    padding: .7rem .8rem;
    font-size: .85rem;
  }
}




/* =========================
   火葬車ページ：燃やせるもの／燃やせないもの／かご棺カード
   ========================= */

#section6 .fire-info{
  margin-top: 2.4rem;
}

#section6 .fire-info-title{
  margin: 0 0 1rem;
  font-size: 1.4rem;
  border-left: 3px solid rgba(255,255,255,.8);
  padding-left: .7rem;
}

/* カードを横並び → 狭い画面では縦並び */
#section6 .fire-info-grid{
  display: grid;
  gap: 1.2rem;
}

@media (min-width: 900px){
  #section6 .fire-info-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* 共通カード */
#section6 .fire-box{
  background: rgba(0,0,0,.55);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.35);
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

#section6 .fire-box h4{
  margin: 0 0 .6rem;
  font-size: 1.05rem;
}

/* テキスト */
#section6 .fire-box p{
  margin: 0 0 .5rem;
}

#section6 .fire-box ul{
  margin: .2rem 0 .8rem;
  padding-left: 1.2em;
}

#section6 .fire-box li{
  list-style: disc;
  margin-bottom: .35rem;
}

/* 小さめ注記 */
#section6 .fire-box .small{
  font-size: .8rem;
  opacity: .9;
}

/* かご棺ボックスは少しだけ背景を明るく */
#section6 .fire-box.fire-casket{
  background: rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.45);
  margin-top: 1.4rem;
}

/* スマホ時の詰め具合 */
@media (max-width: 600px){
  #section6 .fire-box{
    padding: .9rem .9rem 1.05rem;
  }
  #section6 .fire-info-title{
    font-size: 1.2rem;
  }
}


/* ここで囲んだところは途中改行させない */
.no-break {
  display: inline-block;  /* これが重要 */
  white-space: nowrap;
  word-break: keep-all;   /* 念のため */
}

/* 両端揃え用 */
.t-justify,
.t-justify p,
.t-justify li{
  text-align: justify;           /* 両端揃え */
  text-justify: inter-character; /* 日本語用に文字間で調整 */
}

/* ご訪問エリア：基本ルールをカード風に */
#section-area .area-rules-box{
  margin-top: 1.6rem;
  padding: 1rem 1.2rem 1.1rem;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* 見出し行 */
#section-area .area-rules-box dt{
  margin: 0 0 .4rem;
  font-weight: 600;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: .3rem;
}

/* 本文リスト */
#section-area .area-rules-box dd{
  margin: 0;
}
#section-area .area-rules-box ul{
  margin: .4rem 0 0;
  padding-left: 1.2em;
}
#section-area .area-rules-box li{
  margin-bottom: .25rem;
}
#section-area .area-rules-box li + li{
  border-top: 1px dashed rgba(255,255,255,.25); /* 行の区切りでテーブル感 */
  padding-top: .3rem;
}

/* 注記 */
#section-area .area-rules-box .note{
  margin-top: .9rem;
  font-size: .85rem;
  opacity: .9;
}


/* ページ内カテゴリボックス（１・２・３…） */
.jyunbi-block {
  position: relative;
  margin: 2rem 0;
  border-radius: 16px;
  overflow: hidden;
}

/* 写真レイヤー：本文より手前（z-index:0） */
.jyunbi-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

/* 白いベール：写真の上、文字の下（z-index:1） */
.jyunbi-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 1;
}

/* 中身（テキスト）を一番手前に（z-index:2） */
.jyunbi-block-inner {
  position: relative;
  padding: 1.8rem 1.6rem;
  z-index: 2;
}

/* １・２・３…ごとに別の写真を指定 */
.jyunbi-block1::before {
  background-image: url("../images/jyunbi_bg1.jpg");
}
.jyunbi-block2::before {
  background-image: url("../images/jyunbi_bg2.jpg");
}
.jyunbi-block3::before {
  background-image: url("../images/jyunbi_bg3.jpg");
}
.jyunbi-block4::before {
  background-image: url("../images/jyunbi_bg4.jpg");
}
.jyunbi-block5::before {
  background-image: url("../images/jyunbi_bg5.jpg");
}

/* スマホ時：左右いっぱいに広げる */
@media (max-width: 768px) {
  .jyunbi-block {
    border-radius: 0;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .jyunbi-block-inner {
    padding: 1.5rem 1.2rem;
  }
}

/* jyunbi：4. してもよいこと／控えた方がよいこと の2カラム */
#jyunbi .jyunbi-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* PCでは2列 */
  gap: 1.4rem 2rem;                 /* 上下・左右のすき間 */
  align-items: flex-start;
}

/* カラム内の見出しは上にくっつける */
#jyunbi .jyunbi-col h4{
  margin-top: 0;
}

/* スマホでは1列に崩す */
@media (max-width: 768px){
  #jyunbi .jyunbi-cols{
    grid-template-columns: 1fr;     /* 1列レイアウト */
  }
}

/* 4. してもよいこと／控えた方がよいこと：カラム背景付き */
#jyunbi .jyunbi-col{
  background: rgba(248, 250, 252, 0.96); /* 共通のうすい背景 */
  border-radius: 12px;
  padding: 1rem 1.2rem 1.1rem;
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}

/* 左：してもよいこと（やさしい緑系） */
#jyunbi .jyunbi-col:nth-child(1){
  border-top: 3px solid #22c55e;
}

/* 右：控えた方がよいこと（注意感のあるオレンジ系） */
#jyunbi .jyunbi-col:nth-child(2){
  border-top: 3px solid #f97316;
}

/* 中の見出しやリストの余白を少し整える */
#jyunbi .jyunbi-col h4{
  margin-top: 0;
  margin-bottom: .6rem;
}

#jyunbi .jyunbi-col ul{
  margin: 0;
  padding-left: 1.2em;
}
/* ペットが亡くなったら（jyunbi）内は文字を詰めて普通の組み方にする */
#jyunbi,
#jyunbi p,
#jyunbi li{
  letter-spacing: 0;   /* body の 0.1rem を無効化 */
  text-indent: 0;      /* 1文字字下げもオフ */
  line-height: 1.9;    /* お好みで。読みやすい程度に */
}

/* 必要なら Q&A 全体にも同じ指定をかける */
#jyunbi h3,
#jyunbi h4{
  letter-spacing: 0;
}

/* ペット慰霊塔・樹木葬 共通レイアウト */
.pet-memorial {
  padding: 3rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.8;
}

.pet-memorial-notice {
  background: #829975;
  border-left: 4px solid #c5b28a;
  padding: 1rem 1.2rem;
  margin-bottom: 2.5rem;
}

.pet-memorial-notice p {
  margin: 0;
}

/* 各セクション */
.pet-section {
  margin-bottom: 3rem;
}

.pet-section-inner {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* 画像・テキスト */
.pet-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.pet-text h2 {
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.pet-text p {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.pet-price {
  margin-top: 1rem;
  font-weight: bold;
  font-size: 1rem;
}

.pet-note {
  font-size: 0.9em;
  color: #ffffff;
}

/* スマホ時は縦並び */
@media (max-width: 768px) {
  .pet-section-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .pet-memorial {
    padding: 2rem 1rem;
  }
}

#section1,
#section2,
#section3,
#section4,
#section3b,
#section5{
  scroll-margin-top: 20px;
}

/* section4 の「移動費の基本ルール」をカード風に */
#section4 .fire-info-grid{
  margin-top: 1.6rem;
  padding: 1rem 1.2rem 1.1rem;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* 見出し行 */
#section4 .fire-info-grid dt{
  margin: 0 0 .4rem;
  font-weight: 600;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: .3rem;
}

/* 本文リスト */
#section4 .fire-info-grid dd{
  margin: 0;
}
#section4 .fire-info-grid ul{
  margin: .4rem 0 0;
  padding-left: 1.2em;
}
#section4 .fire-info-grid li{
  margin-bottom: .25rem;
}
#section4 .fire-info-grid li + li{
  border-top: 1px dashed rgba(255,255,255,.25);
  padding-top: .3rem;
}

/* 注記（下の p.note） */
#section4 .fire-info-grid .note,
#section4 .visit-fee .note{
  margin-top: .9rem;
  font-size: .85rem;
  opacity: .9;
}

/* 火葬車ページ：かごしま＋お伺い＋車レイアウト */
#section6 .area-badges{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* 上段2枚並び */
  gap: 12px;
  justify-items: center;
  max-width: 650px;
  margin: 1.8rem auto 1.2rem;
}

/* 上段2枚（かごしま／お伺い） */
#section6 .area-badges img.area-badge:nth-of-type(1),
#section6 .area-badges img.area-badge:nth-of-type(2){
  max-width: 400px;
}

/* 下段センター：車画像 */
#section6 .area-badge-car{
  grid-column: 1 / -1;    /* 2列ぶち抜き */
  max-width: 420px;
  margin-top: 4px;
}

/* スマホ時：少しコンパクトに */
@media (max-width: 600px){
  #section6 .area-badges{
    max-width: 100%;
    gap: 10px;
  }
  #section6 .area-badges img.area-badge:nth-of-type(1),
  #section6 .area-badges img.area-badge:nth-of-type(2){
    max-width: 200px;
  }
  #section6 .area-badge-car{
    max-width: 320px;
  }
}
/* 火葬車ページ：かごしま＋お伺い＋車の配置 */
#section6 .area-badges{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* 上段2枚 */
  gap: 12px;
  justify-items: center;
  max-width: 650px;
  margin: 1.8rem auto 1.2rem;
}

/* 上段2枚（かごしま／お伺い） */
#section6 .area-badge-map,
#section6 .area-badge-call{
  max-width: 400px;
}

/* 下段センター：車 */
#section6 .area-badge-car{
  grid-column: 1 / -1;      /* 2列ぶち抜きで中央 */
  max-width: 420px;
  margin-top: 4px;
}

/* スマホ時は少し小さく */
@media (max-width: 600px){
  #section6 .area-badges{
    max-width: 100%;
    gap: 10px;
  }
  #section6 .area-badge-map,
  #section6 .area-badge-call{
    max-width: 200px;
  }
  #section6 .area-badge-car{
    max-width: 320px;
  }
}

/* --- フワッと登場の共通初期値（section6専用） --- */
#section6 .area-badge{
  opacity: 0;
  transform: translateY(20px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition:
    opacity .7s ease,
    transform .7s ease;
}

/* 表示された時（is-show 付与済み） */
#section6 .area-badge.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* 順番制御：車 → かごしま → お伺い の順で出る */
#section6 .area-badge-car{
  transition-delay: 0s;     /* 先に出る */
}
#section6 .area-badge-map{
  transition-delay: .25s;   /* 少し遅れて */
}
#section6 .area-badge-call{
  transition-delay: .5s;    /* さらに遅れて */
}
/* かごしま・お伺いだけ揺らす（車は揺らさない） */
#section6 .area-badge-map.is-show,
#section6 .area-badge-call.is-show{
  animation: pet-yurayura 3s ease-in-out infinite;
}

/* 火葬車セクション：かごしま／お伺いだけ大きく */
#section6 .area-badge-map,
#section6 .area-badge-call{
  max-width: 460px;   /* ← 好みで 400〜480 の範囲で調整OK */
  width: 100%;
}

/* スマホ時は少しだけ控えめに */
@media (max-width: 600px){
  #section6 .area-badge-map,
  #section6 .area-badge-call{
    max-width: 320px;
  }
}

.pagetop a{
  position: fixed;
  z-index: 10001; /* 問い合わせボタンより少し上にしておく */
}