@charset "utf-8";

/*-----------------------------------------------------
大見出し
-------------------------------------------------------*/

/* 中見出し
------------------------------------------------*/

/* 小見出し/コメント */

/* 1400px以下 */
@media only screen and (max-width: 1399px) {
}

/* 1200px以下 */
@media only screen and (max-width: 1199px) {
}

/* タブレット以下 */
@media only screen and (max-width: 991px) {
}

/* スマホ */
@media only screen and (max-width: 767px) {
}

/*-----------------------------------------------------
中央寄せ
-------------------------------------------------------*/

.center-sample{
  position: relative;
  width: 100%;
  height: 50vw;
}
.center-sample__inner{
  position: absolute;
  width: 25vw;
  height: 25vw;
}

/*-----------------------------------------------
 上下左右中央
------------------------------------------------*/

.center-sample__inner--01{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/*-----------------------------------------------
 上下中央
------------------------------------------------*/

.center-sample__inner--02{
  top: 0;
  bottom: 0;
  margin: auto 0;
}

/*-----------------------------------------------
左右中央
------------------------------------------------*/

.center-sample__inner--03{
  right: 0;
  left: 0;
  margin: 0 auto;
}

/*-----------------------------------------------------
パララックス
-------------------------------------------------------*/

.parallax{
  clip-path: inset(0);
  height: 50vh;
}
.parallax::before{
  background: url(../images/cat.jpg) no-repeat center center;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;  
}


/*-----------------------------------------------------
iframeリンク無効化
-------------------------------------------------------*/

.snapwidget-widget{
  pointer-events:none;
}

/*-----------------------------------------------------
共通
-------------------------------------------------------*/
body {
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
  letter-spacing: 0.09em; /* 文字間 */
}

section{
  padding: 50px 0;
}

.gothic-text{
  font-family: "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.color-white{
  color: #FFF;
}

.text-bold{
  font-weight: bold;
}


h2{
  padding: 1em 0;
}

h3{
  font-size: 1.3em;
}

@media only screen and (max-width: 767px) {
section{
  padding: 5px 0;
}
.hidden-sp {
    display: none;
  }
}


/*-----------------------------------------------------
header
-------------------------------------------------------*/
/* --- 基本設定 --- */
#Header {
  background-color: #e9e1c9;
  position: relative; /* ボタンを絶対配置(absolute)する際の基準点 */
  padding: 1em 0;
}

#Header p {
  margin-bottom: 0;
}

/* ======== PC表示用スタイル (768px以上) ======== */
/* SP用ヘッダーを非表示 */
.d-block.d-md-none {
  display: none;
}
/* PC用ヘッダーを表示 */
.d-none.d-md-block {
  display: block;
}

.header-box {
  display: flex;
  justify-content: space-between; /* 子要素を両端に配置 */
  align-items: center;
  /* ボタンが重なってもナビが表示されるように右側に余白を確保 */
  padding: 0 170px 0 0.5em; 
  max-width: 1400px;
  margin: 0 auto;
}

.h-logo {
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
  font-weight: bold;
  font-size: 1.8em;
  white-space: nowrap; /* テキストの折り返しを防ぐ */
  z-index: 2; /* ボタンより手前に表示したい場合 */
}

/* ヘッダーMENU */
nav.d-none.d-lg-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
nav.d-none.d-lg-block li { 
  margin: 0 20px; 
}
nav.d-none.d-lg-block a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  white-space: nowrap;
}
nav.d-none.d-lg-block a:hover { 
  color: #888888; 
}

/* ヘッダー資料請求（CTAボタン） */
.h-right {
  position: absolute; /* 親要素(#Header)を基準に絶対配置 */
  top: -5px;          /* 上下位置の微調整 */
  right: 0;           /* 画面の右端にぴったり配置 */
  z-index: 10;
}

.h-right .btn {
  background-color: #003e6a;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  line-height: 1.6;
  font-size: 1.1em;
  display: block;
  padding: 45px 35px;
  border: none;
  transition: opacity 0.3s;
}
.h-right .btn:hover {
  opacity: 0.8;
}

/* ======== レスポンシブ対応 ======== */

/* --- 1. PC幅が狭い場合 (1199px以下) --- */
@media (max-width: 1199px) {
  .header-box {
    padding-right: 150px; /* ボタン用の右側スペースを調整 */
  }
  nav.d-none.d-lg-block li {
    margin: 0 10px;
  }
}

/* --- 2. タブレットサイズ (991px以下) --- */
@media (max-width: 991px) {
  /* ナビゲーションを非表示（ハンバーガーメニューに切り替える想定） */
  .d-none.d-lg-block {
    display: none;
  }
  .header-box {
    /* ナビが消えたので、ロゴとボタンの間のスペースを確保 */
    justify-content: flex-start; 
  }
  .h-logo { 
    font-size: 1.5em;
  }
}

/* --- 3. SPサイズ (767px以下) --- */
@media (max-width: 767px) {
  /* PC用ヘッダーを非表示 */
  .d-none.d-md-block {
    display: none;
  }
  /* SP用ヘッダーを表示 */
  .d-block.d-md-none {
    display: block;
  }

  #Header {
        padding: 0 0 10px 0;
    }
  .h-logo_sp {
    text-align: center;
  }
  .h-logo_sp img {
    max-width: 135px;
  }
  .h-logo_sp nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  .h-logo_sp nav ul:first-child {
    margin-bottom: 15px;
  }
  .h-logo_sp nav li {
    display: inline-block;
    margin: 0 7px;
    white-space: nowrap;
  }
  .h-logo_sp nav a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
  }
}
/*-----------------------------------------------------
FV
-------------------------------------------------------*/
#Fv, .fv {
  padding: 0;
  margin: 0;
  position: relative;
}

.fv_img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

.fv_leaf {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease;
}

/* 画像サイズ */
.img-fluid-charm {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* leaf01 */
.fv_leaf01 {
  top: 5%;
  left: 24%;
  transform: translateX(-83%);
  width: 6vw;
}

/* leaf02 */
.fv_leaf02 {
  bottom: -12%;
  left: 20%;
  transform: translateX(-50%) rotate(-12deg);
  width: 9vw;
}

/* leaf03 */
.fv_leaf03 {
  bottom: -20%;
  left: 90%;
  transform: translateX(-50%) rotate(-12deg);
  width: 12vw;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 1024px) {
  .fv_leaf02 {
    bottom: -6%;
    left: 20%;
    width: 5vw;
  }
}

@media (max-width: 768px) {
  .fv_leaf01 {
    width: 6vw;
    top: 8%;
  }

  .fv_leaf02 {
    bottom: -2%;
    left: 22%;
    width: 6vw;
  }

  .fv_leaf03 {
  bottom: -13%;
  left: 85%;
  transform: translateX(-50%) rotate(-12deg);
  width: 10vw;
}

  /* SPでテキストを画像の端に揃える */
  .col-12.col-md-4 .miryoku-text,
  .col-12.col-md-4 h3 {
    text-align: left;
    max-width: 80%;   /* 画像と同じ幅 */
    margin-left: auto; /* 中央寄せしている場合の調整 */
    margin-right: auto;
  }


/* リンクにマウスを乗せた時の簡単なホバーエフェクト（任意） */
.header-nav nav a:hover {
    opacity: 0.7;
}

}

@media (max-width: 480px) {
  .fv_leaf02 {
    bottom: -45px;
    left: 25%;
    width: 15vw;
  }
}

/*-----------------------------------------------------
はじめに
-------------------------------------------------------*/
.hajimeni{
  background-image: url(../images/hajimeni-bg.jpg);
  background-repeat: no-repeat;      /* 繰り返さない */
  background-size: cover;            /* セクション全体に拡大 */
  background-position: center;       /* 中央に配置 */
  padding: 50px 0;
  margin: 0;
  position: relative;
}

.kawasaki-seihu-logo{
  width: 20em;
  margin: 0 auto;
}

.hajimeni-text{
  font-size: 14pt;
  line-height: 24.5pt; /* 行間 */
  letter-spacing: 100; /* 文字間 */
  text-align: center; /* テキストを中央ぞろえにする */
}

.hajimeni h2{
  font-size: 23pt;
  letter-spacing: 100; /* 文字間 */
}

.hajimeni h3{
  font-size: 18.88pt;
  letter-spacing: 200; /* 文字間 */
}

.miryoku-text{
  font-size: 10.8pt;
  letter-spacing: 200; /* 文字間 */
}

 .point-pic{
  width: 50em;
 }

.hajimeni_leaf {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease;
}

/* leaf04 */
.fv_leaf04 {
  top: 18%;
  left: 91%;
  transform: translateX(-83%);
  width: 3.8vw;
}

/* leaf05 */
.fv_leaf05 {
  bottom: 52%;
  left: 21%;
  transform: translateX(-50%) rotate(-12deg);
  width: 5vw;
  z-index: -1;
}

/* leaf06 */
.fv_leaf06 {
  bottom: 56%;
  left: 82%;
  transform: translateX(-50%) rotate(-12deg);
  width: 4vw;
  z-index: -1;
}

/* leaf07 */
.fv_leaf07 {
  top: 91%;
  left: 16%;
  transform: translateX(-83%);
  width: 7vw;
  z-index: -1;
}

/* leaf08 */
.fv_leaf08 {
  bottom: -2%;
  left: 34%;
  transform: translateX(-50%) rotate(-12deg);
  width: 3vw;
}

/* leaf09 */
.fv_leaf09 {
  bottom: -3%;
  left: 83%;
  transform: translateX(-50%) rotate(-12deg);
  width: 7vw;
}

/* タブレット以下 */
@media only screen and (max-width: 991px) {
/* leaf05 */
.fv_leaf05 {
  bottom: 50%;
  left: 19%;
  transform: translateX(-50%) rotate(-12deg);
  width: 5vw;
}

/* leaf06 */
.fv_leaf06 {
  bottom: 53%;
  left: 84%;
  transform: translateX(-50%) rotate(-12deg);
  width: 4vw;
}
}

/*点線の円*/
.dotted-circle {
  position: absolute;         /* 画像上に重ねる */
  top: -13px;                  /* 上からの距離 */
  left: -14px;                 /* 左からの距離 */
  width: 80px;
  height: 80px;
  border: 2px dotted #333;
  border-radius: 50%;
  display: flex;
  flex-direction: column;  /* ← 縦方向に並べる */
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  line-height: 1; /* 行間を狭く */
}

.point, .number {
  line-height: 1; /* 1より小さくしてもOK */
}

.point {
  font-size: 0.8em;
  margin-bottom: -10px; /* 微調整 */
  line-height: 1;
}

.number {
  font-size: 2em;
  font-weight: bold;
  margin-top: 0;
  line-height: 1;
}


/* タブレット以下 */
@media only screen and (max-width: 991px) {
.dotted-circle {
  position: absolute;         /* 画像上に重ねる */
  top: 8px;                  /* 上からの距離 */
  left: -2px;                 /* 左からの距離 */
  width: 50px;
  height: 50px;
  border: 2px dotted #333;
  border-radius: 50%;
  display: flex;
  flex-direction: column;  /* ← 縦方向に並べる */
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  line-height: 1; /* 行間を狭く */
}

.hajimeni h3{
  font-size: 15pt;
  letter-spacing: 200; /* 文字間 */
}

.point, .number {
  line-height: 1; /* 1より小さくしてもOK */
}

.point {
  font-size: 0.7em;
  margin-bottom: -16px; /* 微調整 */
  line-height: 1;
}

.number {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0;
  line-height: 1;
}
}

/* スマホ */
@media only screen and (max-width: 767px) {
.hajimeni{
  background-color: #fff !important;
  background-image: none;      /* 背景画像をなくす */
}

  .dotted-circle {
  position: absolute;         /* 画像上に重ねる */
  top: -13px;                  /* 上からの距離 */
  left: 6px;                 /* 左からの距離 */
  width: 80px;
  height: 80px;
  border: 2px dotted #333;
  border-radius: 50%;
  display: flex;
  flex-direction: column;  /* ← 縦方向に並べる */
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  line-height: 1; /* 行間を狭く */
}

.point, .number {
  line-height: 1; /* 1より小さくしてもOK */
}

.point {
  font-size: 0.8em;
  margin-bottom: -10px; /* 微調整 */
  line-height: 1;
}

.hajimeni h3{
  font-size: 18pt;
  letter-spacing: 200; /* 文字間 */
}

.number {
  font-size: 2em;
  font-weight: bold;
  margin-top: 0;
  line-height: 1;
}
}

@media only screen and (max-width: 483px) {
  .dotted-circle {
  position: absolute;         /* 画像上に重ねる */
  top: 1px;                  /* 上からの距離 */
  left: 6px;                 /* 左からの距離 */
  width: 65px;
  height: 65px;
  border: 2px dotted #333;
  border-radius: 50%;
  display: flex;
  flex-direction: column;  /* ← 縦方向に並べる */
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  line-height: 1; /* 行間を狭く */
}

.point, .number {
  line-height: 0.5; /* 1より小さくしてもOK */
}

.point {
  font-size: 0.7em;
  margin-bottom: -10px; /* 微調整 */
  line-height: 1;
}

.number {
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 0;
  line-height: 1;
}
}

/*ボタン*/
a.btn--blue.btn--border-double {
  border: 7px double #949494;
  padding: 0.5em 3em;
}

.btn{
  font-size: 10.8pt;
}

@media only screen and (max-width: 767px) {
.kawasaki-seihu-logo {
    width: 13em;
}
.hajimeni-text{
  font-size: 1em;
  line-height: 1.6; /* 行間 1.4〜1.8くらいが読みやすい目安 */
  letter-spacing: 0.05em; /* 文字間 */
  text-align: left; /* SPサイズでは左ぞろえにする */
}
}

/*-----------------------------------------------------
MENU選択
-------------------------------------------------------*/
.image-container2 {
  position: relative; /* 基準を作る */
  display: inline-block;
}

.image-container {
  position: relative; /* 基準を作る */
  display: inline-block;
  margin-bottom: 2em;
}

.image-container img {
  display: block;
  width: 100%; /* 必要に応じて調整 */
  height: auto;
}

.menu-center-text {
  position: absolute;
  top: 50%;   /* 上から50% */
  left: 50%;  /* 左から50% */
  transform: translate(-50%, -50%); /* 文字の中心を基準に */
  color: white;  /* 文字色（見やすいように） */
  font-size: 24px;
  font-weight: bold;
  font-family: "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.img-fluid-menu {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
}

.menu .row .col-md-6:nth-child(1) .image-container,
.menu .row .col-md-6:nth-child(2) .image-container {
  margin-bottom: 35px; /* 好きな隙間に調整 */
}

@media only screen and (max-width: 767px) {
.menu .row .col-md-6:nth-child(1) .image-container,
.menu .row .col-md-6:nth-child(2) .image-container {
  margin-bottom: 0px; /* 好きな隙間に調整 */
}

.menu-center-text {
  font-size: 18px;
}
}

/*-----------------------------------------------------
霊園のご紹介
-------------------------------------------------------*/
/* 画像サイズ調整 */
.img-fluid-introduction {
  max-width: 90%; /* 画像の最大幅 */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* PCは中央揃え */
.responsive-text {
  text-align: center;
}

/* SPサイズで左寄せ・画像幅に揃える */
@media (max-width: 767.98px) {
  .responsive-text {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }

  .img-fluid-introduction {
  max-width: 100%;
}
}

/*-----------------------------------------------------
充実のお墓まいり
-------------------------------------------------------*/
/* ====== Jujitsuセクション背景 ====== */
#Jujitu {
  background-image: url(../images/jujitsu-bg.png);
  background-repeat: no-repeat;      /* 繰り返さない */
  background-size: cover;            /* セクション全体に拡大 */
  background-position: center;       /* 中央に配置 */
}

.img-fluid-jujitsu {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
}

.jujitsu {
  position: relative;
}


/* 1400px以下 */
@media only screen and (max-width: 1399px) {
  .jujitsu-car1 {
  top: 70%;
  left: 32%;
  transform: translateX(-83%);
  width: 14vw;
}
}

/* 1200px以下 */
@media only screen and (max-width: 1199px) {
  .jujitsu-car1 {
  top: 67%;
  left: 32%;
  transform: translateX(-83%);
  width: 17vw;
}
}

/* タブレット以下 */
@media only screen and (max-width: 991px) {
  .jujitsu-car1 {
  top: 66%;
  left: 35%;
  transform: translateX(-83%);
  width: 13vw;
}
}

/* スマホ */
@media only screen and (max-width: 430px) {
  .jujitsu-car1 {
  top: 58%;
  left: 94%;
  transform: translateX(-83%);
  width: 42vw;
}
}

/* スマホ */
@media only screen and (max-width: 767px) {
#Jujitu {
  background-image: url(../images/jujitsu-bg-sp.png);
  background-repeat: no-repeat;      /* 繰り返さない */
  background-size: cover;            /* セクション全体に拡大 */
  background-position: center;       /* 中央に配置 */
}

  .jujitsu-car1 {
  top: 69%;
  left: 89%;
  transform: translateX(-83%);
  width: 46vw;
}

}

/*-----------------------------------------------------
ペットと入れるお墓
-------------------------------------------------------*/

/* 親コンテナ: 画像を絶対配置するための基準点にする */
.pets .double-line-title {
  position: relative; /* 子要素の絶対配置の基準にする */
  border-top: 4px double #ceb200;
  border-bottom: 4px double #ceb200;
  /* (補足) テキストと画像が重ならないよう、最低限の高さを確保 */
  min-height: 180px; 
  display: flex;
  align-items: center; /* テキストブロックを垂直中央に配置 */
}

/* テキストのコンテナ: 左右のmarginをautoにして中央に配置 */
.pets .text-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  /* 画像が回り込まないようにz-indexを指定 */
  position: relative;
  z-index: 2;
}

/* 画像のコンテナ: 絶対配置で右端に固定 */
.pets .image-wrap {
  position: absolute;   /* 絶対配置 */
  right: 0;             /* 親要素の右端を基準に0pxの位置へ */
  top: 50%;             /* 親要素の上から50%の位置へ */
  transform: translateY(-50%); /* Y軸方向に-50%移動し、垂直中央揃え */
  
  width: 250px; /* 画像の幅を固定（必要に応じて調整） */
  z-index: 1;
}

.pets .image-wrap figure {
    margin: 0; /* figureタグのデフォルトマージンをリセット */
}

.pets .image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.pets h2 {
  text-align: center;
  padding-bottom: 1rem;
  font-size: 1.8rem;
}

.pets p {
  text-align: center;
  line-height: 1.8;
}

.pets .text-end {
  text-align: right;
  margin-top: 1rem;
}


/* --------------------------------
  レスポンシブ対応 (画面幅が992px以下の場合)
  ※テキストと画像が重なり始めるブレークポイントで調整
----------------------------------- */
@media (max-width: 992px) {
  .pets .double-line-title {
    /* flexboxで縦並びにする */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
  }

  /* 画像ブロックの絶対配置を解除 */
  .pets .image-wrap {
    position: static; /* 絶対配置を解除 */
    transform: none;  /* 中央揃えのtransformをリセット */
    margin-bottom: 1.5rem; /* 下に余白を追加 */
  }

  /* テキストブロックの左右マージンをリセット */
  .pets .text-wrap {
    margin-left: 0;
    margin-right: 0;
  }
}


/*-----------------------------------------------------
お客様の声
-------------------------------------------------------*/
#Voice{
  padding: 0 !important;
}

.voice-img{
    max-width: 70%;
    height: auto;
    margin: 0 auto;
}

.customer-voice{
  text-align: center;  /* テキストを中央 */
  margin-left: auto;   /* ブロック自体の中央 */
  margin-right: auto;  /* ブロック自体の中央 */
}

.customer-voice-bg{
  background-color: #f7f5ed;
  padding: 0.2em;
}


/* 区切り線 */
@media (min-width: 768px) {
  /* 左のカラムだけ右に線 */
  .voice-row .voice-col:first-child {
    border-right: 1px solid #000;
    padding-right: 30px; /* 線と内容の間の余白 */
    box-sizing: border-box;
  }

  /* 右のカラムの余白 */
  .voice-row .voice-col:last-child {
    padding-left: 30px;
    box-sizing: border-box;
  }
}
/*-----------------------------------------------------
川崎清風霊園の概要
-------------------------------------------------------*/
#Bosyu {
    padding-top: 0 !important;
}

.bosyu table {
  width: 80%;
  /* border-collapseをseparateにすると確実ですが、今回はcollapseのままでも大丈夫です */
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

.bosyu td {
  padding: 0.5em 0.5em;
  font-size: 1rem;
  color: #333;
  font-family: "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/* ▼▼▼▼▼ 変更点 ▼▼▼▼▼ */
.bosyu-th {
    background-color: #f7f5ed;
    text-align: center;
    width: 25%;
    /* 左右の線をなくし、上下の線のみを指定 */
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.bosyu-td {
    background-color: #fff;
    text-align: center;
    /* 左右の線をなくし、上下の線のみを指定 */
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding-left: 2em !important;
}
/* ▲▲▲▲▲ 変更点 ▲▲▲▲▲ */

.facilities {
  display: flex; /* 要素をFlexコンテナにする */
  justify-content: center; /* 中のアイテムを水平方向の中央に配置 */
  align-items: center; /* 中のアイテムを垂直方向の中央に配置（必要な場合） */
  flex-wrap: wrap; /* 画面幅に応じてアイテムを折り返す */
  gap: 10px; /* アイテム間の隙間を10pxに設定 */
}

.facility-item {
    background-color: #003300;
    color: #fff;
    padding: 0.5em 1em;
    font-size: 0.9rem;
}

.bosyu-note {
    display: block;
    margin: 0.5em auto 0;
    text-align: right;
    font-size: 0.7rem;
}

/* レスポンシブ対応 (こちらは変更ありません) */
@media only screen and (max-width: 767px) {
    h2.text-center {
        font-size: 1.5rem;
    }

    .bosyu table {
        width: 100%;
        border: none;
    }

    .bosyu table,
    .bosyu tbody,
    .bosyu tr,
    .bosyu td {
        display: block;
    }

    .bosyu tr {
      border-bottom: 1px solid #333;
    }

    .bosyu tr:first-child {
      border-top: 1px solid #333;
    }

    .bosyu-th,
    .bosyu-td {
        width: auto;
        border: none;
        text-align: center;
    }
    
    .bosyu-th {
        padding-top: 1em;
        padding-bottom: 0.5em;
        font-weight: bold;
    }

    .bosyu-td {
        padding: 0.5em 1em 1em !important;
    }
    
    .facilities {
        justify-content: center;
    }

    .bosyu-note {
        width: 100%;
        text-align: center;
        margin-top: 1em;
        font-size: 0.6em;
    }
}
/*-----------------------------------------------------
一般墓地
-------------------------------------------------------*/
#Cemetery2{
  background-image: url(../images/jujitsu-bg.png);
  background-repeat: no-repeat;      /* 繰り返さない */
  background-size: cover;            /* セクション全体に拡大 */
  background-position: center;       /* 中央に配置 */
  padding-top: 5em;
  position: relative;
}

.cemetery-img {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease;
}
.cemetery-img01 {
  top: 10%;
  left: 80%;
  transform: translateX(-83%);
  width: 15vw;
}

/* 11803px以下 */
@media only screen and (max-width: 1803px) {
.cemetery-img01 {
  top: 10%;
  left: 80%;
  transform: translateX(-83%);
  width: 16vw;
}
}

/* 1309px以下 */
@media only screen and (max-width: 1309px) {
.cemetery-img01 {
  top: 11%;
  left: 87%;
  transform: translateX(-83%);
  width: 20vw;
}
}


/* 1200px以下 */
@media only screen and (max-width: 1199px) {
.cemetery-img01 {
  top: 13%;
  left: 88%;
  transform: translateX(-83%);
  width: 18vw;
}
}

/* ディスプレイサイズが1114px以下の場合に適用されるスタイル */
@media (max-width: 1114px) {
  .cemetery-img01 {
    display: none; /* 要素を非表示にする */
  }
}

/* 画像サイズ */
.img-fluid-menu {
  max-width: 90%; /* 必要に応じて調整 */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* テキストの幅を画像に合わせて左揃え */
.ohaka-microcopy,
.ohaka-title {
  display: block;
  max-width: 90%;  /* 画像と同じ幅 */
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* 左端揃え */
}

/* テキスト */
.ohaka-microcopy{
  font-size: 13.8pt;
  margin-bottom: 0 !important;
  letter-spacing: 200; /* 文字間 */
}

.ohaka-microcopytop{
  font-size: 13.8pt;
  margin-bottom: 0 !important;
  letter-spacing: 200; /* 文字間 */
}

.ohaka-title{
  font-size: 1.8em;
  margin-bottom: 0.5em !important;
  max-width: 90%; /* 必要に応じて調整 */
}

.ohaka-titletop{
  font-size: 1.8em;
  margin-bottom: 0 !important;
  max-width: 90%; /* 必要に応じて調整 */
}

.voice h2 {
  padding-bottom: 0;
}
.text-big{
  font-size: 2.8em;
  font-weight: bold;
}
.font-size-half{
  font-size: 1.8em;
  font-weight: bold;
}

.ohaka-point{
  font-size: 1.3em;
  margin-bottom: 0 !important;
}

.cemetery-separator{
  border-top: 1px solid #333;
  width: 100%;
  max-width: 100%;
  margin: 2.5em auto; /* 上下の余白＋中央寄せ */
}

.cemetery-separator3 {
    border-top: 1px solid #333;
    width: 100%;
    max-width: 100%;
    margin: 1em auto;
}

@media only screen and (max-width: 767px){
#Cemetery{
  padding-top: 0 !important;
}

  .font-size-half{
  font-size: 0.8em;
  font-weight: bold;
}

.text-big{
  font-size: 2.5em;
  font-weight: bold;
}

.ohaka-microcopy{
  font-size: 1em;
  margin-bottom: 0 !important;
}

.ohaka-point{
  font-size: 1em;
}

.ohaka-title{
  font-size: 1.2em;
  max-width: 90%; /* 必要に応じて調整 */
}

.ohaka-titletop{
  font-size: 1.2em;
  margin-bottom: 0 !important;
  max-width: 90%; /* 必要に応じて調整 */
}

.h2-micro {
  font-size: 1.2rem !important;
}
}

/*-----------------------------------------------------
永代供養付き墓所プラン（はな葬）
-------------------------------------------------------*/
#Permanentmemorial-plan{
  background-image: url(../images/jujitsu-bg.png);
  background-repeat: no-repeat;      /* 繰り返さない */
  background-size: cover;            /* セクション全体に拡大 */
  background-position: center;       /* 中央に配置 */
  position: relative;
}

.hanaso {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.hanaso1 {
  top: 43%;
  left: 79%;
  transform: translateX(-83%);
  width: 23vw;
}

.ohaka-titletop2{
  font-size: 1.8em;
  margin-bottom: 0 !important;
}



/* ディスプレイサイズが1114px以下の場合に適用されるスタイル */
@media (max-width: 1114px) {
  .hanaso1 {
    display: none; /* 要素を非表示にする */
  }
}


/*-----------------------------------------------------
アクセス
-------------------------------------------------------*/
.text-center2{
  text-align:center;
  position: relative;
}

.access-img {
  width: 80% !important;
  display: block;
  margin: 0 auto;   /* 画像を中央配置 */
  height: auto;
}

.access-img02 {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.access-img01 {
  top: 47%;
  left: 24%;
  transform: translateX(-83%);
  width: 12vw;
}

.access-img03 {
  top: 14%;
  left: 85%;
  transform: translateX(-83%);
  width: 16vw;
}

/* ディスプレイサイズが1114px以下の場合に適用されるスタイル */
@media (max-width: 1114px) {
.access-img01 .access-img03 {
    display: none; /* 要素を非表示にする */
  }
}

/* 文字の幅を画像に合わせて左揃え */
.access-text {
  max-width: 80%;   /* 画像と同じ幅 */
  margin: 0 auto;   /* ブロックを中央配置 */
  text-align: left; /* 左端を画像に揃える */
}

.access h3{
  font-size: 2em;
  line-height: 40pt; /* 行間 1.4〜1.8くらいが読みやすい目安 */
  letter-spacing: 50; /* 文字間 */
}

.access h4{
  font-size: 1.5em;
  line-height: 30pt; /* 行間 1.4〜1.8くらいが読みやすい目安 */
  letter-spacing: 43; /* 文字間 */
}

.cemetery-img {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease;
}
.cemetery-img01 {
  top: 10%;
  left: 80%;
  transform: translateX(-83%);
  width: 15vw;
}

/*-----------------------------------------------------
フォーム
-------------------------------------------------------*/
/* ステップリスト全体 */
.status-list {
  display: flex;
  /* li要素を横並びにする */
  list-style: none;
  /* リストの黒点を削除 */
  padding: 0;
  margin-bottom: 2rem;
  /* フォームとの間に余白を設定 */
  gap: 8px;
  /* 各ステップの間の隙間 */
}

/* 各ステップのアイテム */
.status-item {
  flex: 1;
  /* 親要素の幅に対して均等に幅を割り振る */
  text-align: center;
  /* テキストを中央揃え */
  padding: 0.75rem 0.5rem;
  /* 内側の余白（上下 左右） */
  background-color: #f6f3ea;
  /* 通常時の背景色 */
}

@media (max-width: 768px) {
  .status-item {
    font-size: 0.65rem;
  }
}

/* アクティブなステップのアイテム */
.status-item-active {
  background-color: #9b7b25;
  /* アクティブ時の背景色 */
  color: #fff;
  /* アクティブ時の文字色 */
}

/* チェックボックスの各項目をグループ化し、間隔を調整 */
.form-check-group {
  display: flex;
  /* 子要素を横並びにする */
  flex-wrap: wrap;
  /* 画面幅が足りない場合に折り返す */
  align-items: center;
  /* 縦位置を中央に揃える */
  column-gap: 1rem;
  /* 折り返して縦になった時の上下の隙間を小さく設定 */
  row-gap: 0.25rem;
  /* チェックボックスとラジオボタン間の横の隙間 */
  margin-bottom: 0.75rem;
}

.form-check-group:last-child {
  margin-bottom: 0;
}

/* ラジオボタンの選択肢エリアのスタイル */
.sub-options {
  margin-left: 20px;
  padding-top: 5px;
  display: flex;
  /* 子要素を横並びにする */
  flex-wrap: wrap;
  /* 画面幅に応じて折り返す */
  align-items: center;
  /* 要素の縦位置を中央揃えにする */
  gap: 1.25rem;
  /* ラジオボタン間の隙間 */
}

.radio-group-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  /* ラジオボタン間の隙間 */
}

/* 括弧のスタイル */
.bracket {
  font-size: 1.2em;
}

/* 括弧とラジオボタンの間の隙間を詰めて見栄えを調整 */
.bracket.start {
  margin-right: -0.6rem;
}

.bracket.end {
  margin-left: -0.6rem;
}

/* 条件に応じて表示/非表示を切り替えるフィールドの初期状態 */
.conditional-field {
  display: none;
}

/* ボタン */
.custom-gray-btn {
  background-color: #919191;
  /* 指定の背景色 */
  color: #fff;
  /* 白文字 */
  border-radius: 0;
  /* 角丸なし */
  border: none;
  /* 枠線を消去 */
}

/* マウスが乗った時のスタイル */
.custom-gray-btn:hover {
  color: #fff;
  /* 文字色を維持 */
  filter: brightness(90%);
  /* 少しだけ暗くしてフィードバック */
  background: #c0c0c0;
}

/* disabled状態のボタンのスタイルを上書き */
.custom-gray-btn:disabled {
  background-color: #c0c0c0;
  /* 少し薄いグレーに */
  color: #f0f0f0;
}

.large-radio {
  transform: scale(1.5);
  margin: 5px; /* 拡大に合わせて余白調整 */
}

.large-checkbox {
  transform: scale(1.5);
  margin: 5px; /* 拡大に合わせて余白調整 */
}

/*-----------------------------------------------------
資料請求
-------------------------------------------------------*/

/* 全体を囲むバナー（背景担当） */
.contact-banner {
    background-color: #0d436b; /* 背景の濃い青色 */
    color: white;
    padding: 9px 0; /* 上下の余白 */
    z-index: 9999 !important;    /* 他の要素より前面に表示 */
    /* ▼▼▼【重要】ここから4行を追加 ▼▼▼ */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* コンテンツの幅を制御するコンテナ */
.contact-banner .container {
    max-width: 1140px; /* PCでの最大幅（サイトのデザインに合わせて調整） */
    margin: 0 auto; /* 中央揃え */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* 左側の情報エリア */
.contact-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* こちらも折り返し対応 */
}

.contact-info .icon {
    font-size: 24px;
    line-height: 1;
}

.contact-info .label {
    font-size: 16px;
}

.contact-info .note {
    font-size: 14px;
}

/* 電話番号 */
.contact-info .phone-number {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap; /* 電話番号が途中で改行されないようにする */
}

/* 右側のアクションボタンエリア */
.action-buttons {
    background-color: #7d93b8;
    display: flex;
    align-items: center;
    overflow: hidden; /* 角丸をボタンに適用させるため */
    width: 50%;
    z-index: 9999;    /* 他の要素より前面に表示 */
}

/* 個々のアクションボタン */
.action-buttons .btn {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    transition: background-color 0.2s; /* ホバー効果を滑らかに */
}

.action-buttons .btn:hover {
    background-color: #6c83a9; /* ホバー時の色 */
}

.action-buttons .icon {
    font-size: 20px;
}

@media (max-width: 1023px) {
      .contact-banner .container {
        justify-content: center; /* 中央揃えにする */
    }

  .action-buttons {
    width: 100%;
  }
}

@media (max-width: 1500px) {
      .contact-info {
        justify-content: center; /* 中央揃えにする */
        margin: 0 auto;
    }
}

@media (max-width: 583px) {
      .contact-info {
        justify-content: center; /* 中央揃えにする */
        margin: 0 auto;
    }
}

.text-bg-danger {
    color: #fff !important;
    background-color: #9b7b25 !important;
    border-radius: 0 !important;
}

/* スマートフォン向けの調整例 */
@media (max-width: 768px) {
/* 個々のアクションボタン */
.action-buttons .btn {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 40px;
    transition: background-color 0.2s; /* ホバー効果を滑らかに */
    white-space: nowrap; /* ここを追加 */
    margin: 0 auto;
}


    .contact-banner .container {
        justify-content: center; /* 中央揃えにする */
    }
    
    .contact-info .phone-number {
        font-size: 40px; /* 少し小さくする */
    }


  .action-buttons .btn span {
    display: block;
    width: 100%;
    text-align: center;
  }

  .action-buttons .btn span:last-child {
    border-bottom: none; /* 最後のボタンには線をつけない */
  }
}

.form-control {
    border-radius: 0;
    border: solid 1.8px #333;
}

/* 例: placeholder を見やすくする */
input::placeholder {
  color: #999; /* 薄いグレー */
  opacity: 1;
}

.cemetery-separator2{
  border-top: 1.8px solid #333;
  width: 75%;
  max-width: 100%;
  margin: 3em auto; /* 上下の余白＋中央寄せ */
}

/* 資料請求と見学予約の項目を常に表示状態にする */
#materials-wrapper,
#visit-wrapper {
  display: block !important;
}

/*-----------------------------------------------------
footer
-------------------------------------------------------*/
/* ===============================================
フッター全体
=============================================== */
#Footer {
  background-image: url(../images/footer-bg.png);
  background-color: #1a3b25;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #FFF;
  padding: 5em 0;
}

@media (max-width: 768px) {
  #Footer {
  padding: 5em 0;
  padding-bottom: 10em;
}

}

.footer-container {
    margin: 0 auto;
    width: 100%;
}

.footer-layout {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 60px;
    padding-bottom: 40px;
}

/* ===============================================
左側コンテンツ
=============================================== */
.footer-left {
    /* ▼▼▼ PCの時に中央揃えにする設定を追加 ▼▼▼ */
    text-align: center;
}
.footer-left .cemetery-location {
    font-size: 1rem;
    margin: 0 0 5px 0;
}
.footer-left .cemetery-name {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 0 15px 0;
    letter-spacing: 0.1em;
    white-space: nowrap;
    padding: 0 !important;
}
.footer-left .company-info {
    display: flex;
    align-items: center;
    font-size: 1rem;
    /* ▼▼▼ PCの時に中央揃えにする設定を追加 ▼▼▼ */
    justify-content: center;
}
.footer-left .company-info .company-role {
    white-space: nowrap;
}
.company-logo-img {
    height: 20px;
    width: 100%;
    vertical-align: middle;
    padding-left: 0.5em;
}
.footer-left .company-info .company-name {
    margin-left: 10px;
    white-space: nowrap;
}
.footer-left .company-info .separator {
    margin: 0 0.8em;
    border-left: 1px solid #fff;
    height: 27px;
}
.footer-left .company-address {
    font-size: 0.8rem;
    margin-top: 15px;
}


.footer a {
  color: white;
  text-decoration: none;
  text-decoration: none; /* 下線を消したい場合 */
}

@media (max-width: 767px) {
.company-logo-img {
    height: 20px;
    width: 100%;
    vertical-align: middle;
    padding-left: 0.5em;
}
}


/* ===============================================
右側ナビゲーション
=============================================== */
.footer-right {
    padding-top: 10px;
}
.footer-nav ul {
    list-style: none;
    padding: 0 0 0 45px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 5px 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.8);
}

.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.footer-nav a:hover {
    text-decoration: underline;
}

/* ===============================================
コピーライト
=============================================== */
.copyright-notice {
    text-align: center;
    font-size: 0.8rem;
    padding-top: 20px;
    font-family: sans-serif;
}
.copyright-notice p {
    margin: 0;
}
/* ===============================================
   追従ボタン
=============================================== */
/*
 * 画面下部に固定するバナー全体のラッパー
 */
.fix-btn {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    background-color: #193a5f; /* 画像読み込み前の背景色 */
    z-index: 9999;
    display: flex;
    justify-content: center;
}

/*
 * 画像とリンクエリアを重ねるためのコンテナ
 */
.image-links-container {
  position: relative; /* この要素がリンクを配置する基準点 */
  display: inline-block; /* 画像のサイズに合わせる */
}

/*
 * PC/SP共通の画像設定
 * .img-fluid はBootstrapのクラスですが、念のため指定
 */
.image-links-container img {
  display: block;
  width: 100%;
  max-width: 1200px; /* PCでの最大幅（任意で調整） */
}


/*
 * PC/SP共通のリンク基本スタイル
 */
.phone-link,
.docs-link {
  position: absolute;
  display: block;
}

/*
 * PC用のリンクスタイル（横分割）
 * 768px以上の画面幅で適用されます
 */
.phone-link {
  top: 0;
  left: 0;
  width: 50%;   /* 画像の左から65%をリンク範囲に（要調整） */
  height: 100%;
}

.docs-link {
  top: 0;
  right: 0;
  width:50%;   /* 画像の右から35%をリンク範囲に（要調整） */
  height: 100%;
}


/*
 * SP用のリンクスタイル（上下分割）
 * 画面幅が767px以下の場合、PC用のスタイルを上書きします
 */
@media (max-width: 767px) {
  .phone-link {
    top: 0;
    left: 0; /* leftを再指定 */
    width: 100%;
    height: 55%; /* SP画像の上半分（要調整） */
  }

  .docs-link {
    bottom: 0;
    left: 0; /* leftを再指定 */
    width: 100%;
    height: 45%; /* SP画像の下半分（要調整） */
    top: auto; /* PC用のtop:0をリセット */
    right: auto; /* PC用のright:0をリセット */
  }
}
/* ===============================================
レスポンシブ対応 (画面幅が992px以下の場合)
=============================================== */
@media (max-width: 992px) {
    .footer-layout {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .footer-left {
        /* ▼▼▼ SPの時に中央揃えを解除（左揃えに） ▼▼▼ */
        text-align: left;
    }

    .footer-left .company-info {
        /* ▼▼▼ SPの時に中央揃えを解除（左揃えに） ▼▼▼ */
        justify-content: flex-start;
    }

    .footer-nav ul {
        gap: 20px 30px;
    }
    
    .footer-separator {
        display: none; /* スマホでは区切り線を非表示 */
    }
}

@media screen and (max-width: 992px) {
  .footer-nav ul {
    border-left: none;
    padding: 0;
  }

}