/* 妙感寺 共通スタイル（外部CSS連携確認済み） */
:root {
  --bg: #faf9f6;
  --ink: #222;
  --accent: #6b7d5c;
  --line: #e6e0d5;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, serif; color: var(--ink); background: var(--bg); line-height: 1.9; }
.wrap { width: min(1080px, 96%); margin: 0 auto; }
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; padding: 0.75rem 0;}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { font-weight: 700; margin-right: 1rem; text-decoration: none; color: var(--ink); display: flex;
  align-items: center;
  gap: 0.4rem;            /* アイコンとの間隔を少し狭める */
  font-size: 1.1rem;      /* 必要に応じて文字もやや小さく */
  line-height: 1.2;}
.site-nav { display: flex; gap: .75rem; flex-wrap: wrap; padding: .5rem 0; }
.site-nav a { text-decoration: none; color: var(--ink); padding: .25rem .5rem; border-radius: .5rem; }
/* ナビ部分のリンク間隔を微調整 */
.site-nav a {
  margin: 0 0.4rem;
  padding: 0.2rem 0;      /* 上下の余白を減らす */
  font-size: 0.95rem;     /* 文字をやや小さく */
}
.site-nav a:hover { background: var(--line); }
main.content { padding: 2rem 0 4rem; }
h1, h2, h3 { line-height: 1.4; }
h1 { font-size: 1.8rem; margin-top: 0; }
h2 { margin-top: 2rem; font-size: 1.3rem; padding-left: 0; }
h3 { margin-top: 1.2rem; font-size: 1.1rem; }
.poem { background: #fff; border: 1px solid var(--line); border-radius: .75rem; padding: 1rem 1.2rem; }
.poem .alt { color: #555; font-size: .95rem; }
.poem .credit { color: #777; font-size: .9rem; }
.button { display: inline-block; border: 1px solid var(--accent); padding: .5rem .9rem; border-radius: .6rem; text-decoration: none; color: var(--accent); }
.button:hover { background: var(--accent); color: #fff; }
.site-footer { border-top: 1px solid var(--line); background: #fff; padding: 2rem 0; color: #555; }
address { font-style: normal; }
form input, form textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .5rem; background: #fff; }
form button { margin-top: .5rem; }

/* ==== HERO ==== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('./images/houjyou.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 0rem;
  overflow: hidden;
  margin-bottom: 2rem;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25); /* 読みやすさの薄いベール */
}
.hero .hero-inner {
  position: relative; /* ::before の上に載せる */
  padding: 6rem 1rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.hero .hero-sub {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: .1em;
}
.hero .hero-title {
  margin: .25rem 0 0;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
}

.white-bg { 
  background: #fff; 
  height: 50vh
  }
.white-bg {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向の中央 */
  align-items: center;     /* 横方向の中央（念のため） */
}

.white-bg h2 { border-left: none; padding-left: 0; text-align: center; }

/* 正受老人の画像を幅フィット＆下余白だけ */
.poem-figure { margin: 0 0 1rem; }
.poem-figure img { width: 100%; height: auto; display: block; }

  
/* 画像(46%) ＋ GAP(8%) ＋ 詩文(46%) */
.poem-row {
  display: flex;
  gap: 8%;
  align-items: stretch; /* ← 行の高さで両カラムを同じ高さに */
}
.poem-row .poem,
.poem-figure {
  width: 46%;
  margin: 0; /* 図と詩文の外側余白をリセット */
}


/* 詩文の文字サイズ調整 */
.poem .verse {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.9;
}
.poem .alt {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

/* 追加 */
.poem-row .poem {
  height: 100%;
  display: flex;        /* 中の段落のレイアウトはそのまま */
  flex-direction: column;
}

/* 語録セクション：縦横中央揃え＋淡くくすんだ水色の背景 */
.saying-photo {
  display: flex;
  align-items: center;    /* 縦中央 */
  justify-content: center;/* 横中央 */
  min-height: 60vh;
  background: #e6eff3;    /* 淡いくすみ水色 */
  padding: 2rem 1rem;
}
.saying-photo img {
  display: block;
  max-width: 66%;
  height: auto;
}

/* CFセクション */
.cf { background: #f3e6ea; 
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;}

/* CF直下の2枚写真：横並び＆間10px */
.cf-photos {
  display: flex;
  gap: 10px;         /* ← 指定のGAP */
}
.cf-photos .photo {
  flex: 1 1 0;       /* 2枚を均等幅に */
  margin: 10px;
}
.cf-photos img {
  display: block;
  width: 100%;
  height: auto;
}

/* access：（画像左・文言右） */
.access-section { margin-block: 10%; }

.access-row {
  display: flex;
  gap: 8%;
  align-items: flex-start;
}
.access-map,
.access-body { width: 46%; }

.access-map { margin: 0; }
.access-map img { display: block; width: 100%; height: auto; }

/* grave セクション指定 */
/* grave セクション指定 */
.grave {
  min-height: 300px;            /* ← 固定高さを廃止し、最小高さに変更 */
  padding: 40px 0;              /* 上下にゆとりを追加 */
  background: #f3e6ea;          /* 淡くくすんだピンク（既存） */
  display: flex;                /* 内容を縦中央に配置 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;           /* テキスト中央寄せ */
  box-sizing: border-box;
}


/* 説明文を大きく */
.grave-annnai {
  font-size: 30px;
  text-align: center;
}

/* CTAボタンを左右中央に */
.grave .cta {
  width: 100%;
  text-align: center; /* a.button を中央寄せ */
  margin: 0;
}

/* jyojyoji セクションを枠で囲む */
.jyojyoji {
  border-width: medium;   /* ← CSSの正しい値は medium */
  border-style: solid;
  margin: 20px;           /* 上下左右 20px */
  padding: 15px;          /* 上下左右 15px */
}


/*ここから妙感寺の由緒の項目*/

/* yuiso（由緒）セクションの背景画像 */
.yuisho {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;   /* 縦中央 */
  justify-content: center; /* 横中央 */
  text-align: center;
  
  background-image: url('./images/houjyou.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 70vh;

}
/* 由緒セクション：背景を暗く、見出しを強調 */
.yuisho { position: relative; }

.yuisho::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* ← 背景を暗く */
}

.yuisho > * { 
  position: relative; 
  z-index: 1;          /* ベールより上に表示 */
}

.yuisho h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5.6vw, 3.6rem); /* ← 見出しを大きく */
  margin: 0;
}


/* souken：背景を上品な薄グレー、左右50%レイアウト */
.souken {
  background: #f2f3f5;
  display: flex;
  align-items: flex-start;
}
.souken .souken-body,
.souken .souken-photo { width: 50%; }

.souken .souken-photo { margin: 0; }
.souken .souken-photo img { display: block; width: 100%; height: auto; }

/* souken 写真の見た目の高さを小さく（上下をトリミング） */
.souken .souken-photo {
  height: 360px;      /* ← お好みで 240～360px などに調整可 */
  overflow: hidden;
}
.souken .souken-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 枠いっぱいに収めつつ自然にトリミング */
}

/* waka：左画像50%／右本文50%、全体高さ360px、右側は淡いピンク */
.waka {
  display: flex;
  height: 360px;
}
.waka .waka-photo,
.waka .waka-body { width: 50%; }

.waka .waka-photo { 
  margin: 0; 
  overflow: hidden;               /* 縦を詰めるためトリミング */
}
.waka .waka-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* 枠いっぱいに自然に表示 */
  display: block;
}

.waka .waka-body {
  background: #f3e6ea;            /* 前回と同じ淡くくすんだピンク */
  padding: 1rem;                   /* 読みやすさの最小余白（任意） */
}


/* sanzen：左テキスト50%／右画像50%、高さ360px、薄い上品な灰色の背景 */
.sanzen {
  display: flex;
  height: 360px;
  background: #f2f3f5;
}
.sanzen .sanzen-body,
.sanzen .sanzen-photo { width: 50%; }

.sanzen .sanzen-body {
  padding: 1rem;
  overflow: auto; /* 文章が長い場合の保険 */
}
.sanzen .sanzen-photo {
  margin: 0;
  overflow: hidden; /* 高さ固定時のトリミング用 */
}
.sanzen .sanzen-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* mikumo：左画像50%／右本文50%、高さ360px。本文側は淡いピンク背景 */
.mikumo {
  display: flex;
  height: 400px;
}
.mikumo .mikumo-photo,
.mikumo .mikumo-body { width: 50%; }

.mikumo .mikumo-photo {
  margin: 0;
  overflow: hidden;        /* 高さ固定時に自然にトリミング */
}
.mikumo .mikumo-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mikumo .mikumo-body {
  background: #f3e6ea;     /* 既出の淡くくすんだピンク */
  padding: 1rem;
  overflow: auto;          /* 文章が多い場合の保険 */
}

/* tyuukou：左テキスト50%／右画像50%、高さ360px、薄い上品な灰色 */
.tyuukou {
  display: flex;
  height: 410px;
  background: #f2f3f5;
}
.tyuukou .tyuukou-body,
.tyuukou .tyuukou-photo {
  width: 50%;
}

.tyuukou .tyuukou-body {
  padding: 1rem;
  overflow: auto;             /* 文言が多い場合の保険 */
}

.tyuukou .tyuukou-photo {
  margin: 0;
  overflow: hidden;           /* 高さ固定時のトリミング */
}
.tyuukou .tyuukou-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* kokushi：左画像50%／右本文50%、高さ360px。本文側は淡いピンク背景 */
.kokushi {
  display: flex;
  height: 360px;
}
.kokushi .kokushi-photo,
.kokushi .kokushi-body {
  width: 50%;
}

.kokushi .kokushi-photo {
  margin: 0;
  overflow: hidden;             /* 高さ固定時に自然トリミング */
}
.kokushi .kokushi-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kokushi .kokushi-body {
  background: #f3e6ea;         /* 前回と同じ淡くくすんだピンク */
  padding: 1rem;
  overflow: auto;               /* 文章が多い場合の保険 */
}
/* daishi：左テキスト50%／右画像50%、高さ360px、薄い上品な灰色 */
.daishi {
  display: flex;
  height: 360px;
  background: #f2f3f5;
}
.daishi .daishi-body,
.daishi .daishi-photo {
  width: 50%;
}

.daishi .daishi-body {
  padding: 1rem;
  overflow: auto;            /* 文章が増えた場合の保険 */
}

.daishi .daishi-photo {
  margin: 0;
  overflow: hidden;          /* 高さ固定時のトリミング */
}
.daishi .daishi-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* jyoshu：文言の上に画像を70%幅で配置（中央寄せ） */
.jyoshu .jyoshu-photo {
  width: 70%;
  margin: 0 auto 1rem; /* 中央寄せ＋下に少し余白 */
}
.jyoshu .jyoshu-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.jyoshu-body{
  width:70%;
  margin-left:15%;
}

.jyoshu .cta { text-align: center; }


/* korekara：左画像50%／右本文50%、高さ360px。本文側は薄い上品な灰色 */
.korekara {
  display: flex;
  height: 430px;
}
.korekara .korekara-photo,
.korekara .korekara-body {
  width: 50%;
}

.korekara .korekara-photo {
  margin: 0;
  overflow: hidden;             /* 高さ固定時に自然トリミング */
}
.korekara .korekara-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.korekara .korekara-body {
  background: #f2f3f5;          /* 前回と同じ薄い上品な灰色 */
  padding: 1rem;
  overflow: auto;               /* 文章が多い場合の保険 */
}

/* korekara の CTA を左右中央に */
.korekara .cta {
  text-align: center;
  margin-top: 0.5rem;
}



/* ここから拝観案内　*/

 /* haikantop 2カラム */
  .haikantop { display:flex; height:360px; }
  .haikantop .haikan-left {
    width:50%;
    background:#f3e6ea; /* 前回の淡いピンク */
    padding:1rem;
    display:flex; flex-direction:column; justify-content:center;
  }
  .haikantop .haikan-right { width:50%; }
  .haikantop .haikan-right img {
    width:100%; height:100%; object-fit:cover; display:block;
  }
  /* モバイル保険 */
  @media (max-width: 720px){
    .haikantop{flex-direction:column; height:auto;}
    .haikantop .haikan-left, .haikantop .haikan-right{width:100%; height:auto;}
  }


 /* 追記：haikantopの文字サイズをアップ */
  .haikantop .haikan-left h1 {
    font-size: 2rem;       /* 例: 約32px */
    line-height: 1.2;
    margin-bottom: .5rem;
  }
  .haikantop .haikan-left p {
    font-size: 1.25rem;    /* 例: 約20px */
    line-height: 1.6;
  }

  /* 小さな画面での過度な拡大を抑制（任意） */
  @media (max-width: 720px){
    .haikantop .haikan-left h1 { font-size: 1.5rem; }
    .haikantop .haikan-left p  { font-size: 1.125rem; }
  }

  /* --- 拝観 詳細 (haikansyousai) レイアウト ------------------ */
.haikansyousai {
  /* セクションの背景色：前回の淡いグレー相当 */
  background: #f2f2f2;

  /* セクション幅 70% を中央寄せ */
  width: 100%;
  margin-inline: auto;

  /* 中身の余白（任意） */
  padding: 24px;

  /* 3列グリッド・ギャップ20px */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 見出しは1行目で3カラムぶち抜き */
.haikansyousai > h2 {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}



/* レスポンシブ（任意）：画面が狭いときは列数を減らす */
@media (max-width: 1024px) {
  .haikansyousai {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .haikansyousai {
    grid-template-columns: 1fr;
    width: 92%;
  }
}

.haikansyousai .hondou > img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  display: block;
}

.haikansyousai .kannnonnzou > img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  display: block;
}

.haikansyousai .kaisandou > img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  display: block;
}

.haikansyousai .tassyo > img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  display: block;
}

.haikansyousai .sekitei > img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  display: block;
}

.haikansyousai .sekihi > img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  display: block;
}


/* haikansyousai 内の h3 を左右中央揃え */
.haikansyousai h3,
.haikannsyousai h3 {
  text-align: center;
}

/* reijyo の画像を幅60%・中央配置 */
.reijyo > img {
  width: 60%;
  display: block;
  margin-inline: auto;  /* 左右中央 */
}

/* （任意）スマホでは少し広げる */
@media (max-width: 640px) {
  .reijyo > img {
    width: 92%;
  }
}

.reijyo h2 {
  text-align: center;
}


.reijyo{
  background: #f2f3f5;
} 

.reijyo p{
  padding: 20px;
  font-size: 20px;
}

/* reijyo のCTA：左右中央寄せ */
.reijyo .cta {
  text-align: center;
  margin-top: .5rem;
  padding-bottom: 30px;
}


/*　ここから墓地分譲の項目　*/

/* 墓地分譲：eitaikuyo-top ヒーロー */
.eitaikuyo-top {
  width: 100%;
  min-height: 360px;          /* 必要に応じて高さ調整OK */
  color: #fff;                /* 背景を暗くするので文字は白 */
  /* 画像を全面に表示し、うっすら暗くする */
  background: 
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)),
    url('./images/ike.JPG') center / cover no-repeat;
}
.eitaikuyo-top h1 { margin: 0; }

/* eitaikuyo-top：文言を上下左右中央 */
.eitaikuyo-top {
  display: flex;
  flex-direction: column;   /* 見出し＋説明を縦積みのまま */
  align-items: center;      /* 左右中央 */
  justify-content: center;  /* 上下中央 */
  text-align: center;       /* 文字も中央寄せ */
}
/* 永代供養：本文ブロック（eitaikuyo） */
.eitaikuyo {
  background: #f3e6ea;   /* 前回の淡いピンク */
  padding-top: 30px;
  padding-left: 20%;
  padding-bottom: 30px;
}

.eitaikuyo .cta{
  padding-left: 0;
  text-align: center;
  margin: 0;                    /* 念のため */
}

/* 永代供養：本文ブロック（左右対称に） */
.eitaikuyo{
  background: #f3e6ea;
  padding: 30px 10%;   /* ← 左右10%に統一（左20%を廃止） */
}

/* スマホ時も左右対称に */
@media (max-width: 640px){
  .eitaikuyo { padding: 24px 5%; }  /* ← 左だけ8%の指定を削除して左右5%に */
}

/* CTAは中央寄せのままでOK */
.eitaikuyo .cta{
  text-align: center;
  margin: 0;
  padding-left: 0;     /* 念のため残す */
}



/* 任意：スマホでの余白を少し軽くする */
@media (max-width: 640px){
  .eitaikuyo { padding-left: 8%; }
}


/* 霊園スライダー内の画像 */
.reien .slide img {
  width: 90%;
  height: 420px;         /* 既存のまま（トリミング維持） */
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-inline: auto;  /* 90%にしたので中央寄せ */
}

/* reien：各スライドのキャプション左余白を10%に */
.reien .slide figcaption {
  padding-left: 10%;
}

.reien h2{
  text-align:center;
}

/*ここから佐々木承周と祖師*/

/* --- sasakitop 左テキスト／右写真 ------------------ */
.bg-gray { background: #f2f2f2; } /* 以前使っていたライトグレー */

.sasakitop { padding: 2.5rem 0; }
.sasakitop .sasaki-cols {
  display: flex;
  align-items: center;
  gap: 24px;
}
.sasakitop .sasaki-col { width: 50%; }

/* 左カラム（文言） */
.sasakitop .sasaki-copy { padding-left: 30px; }

/* 右カラム（写真） */
.sasakitop .sasaki-photo img {
   width: 100%;
  height: auto;
  display: block;
  object-fit: cover;   /* そのままでも可 */
  
}

/* sasakisyoujyuan：正受庵セクション */
.sasakisyoujyuan {
  background: #f3e6ea;     /* 以前のピンク */
  padding: 30px 30px;
}

/* モバイル時は左余白を抑えるなら（任意） */
@media (max-width: 800px) {
  .sasakisyoujyuan { padding: 20px 16px; /* 上下20px / 左右16px（好みでOK） */}
}

/* 正受庵：写真 + キャプション */
.sasaki-shoujyoan-photo { background: #fff; }
.sasaki-shoujyoan-photo figure {
  width: 70%;
  margin: 50px auto;   /* 上下50px・左右中央 */
  text-align: center;
  padding-top:30px;
  padding-bottom:30px;
}
.sasaki-shoujyoan-photo img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.sasaki-shoujyoan-photo figcaption {
  margin-top: 8px;
  line-height: 1.5;
  font-size: 25px;
}

/* --- sasakiamerica（左テキスト／右写真、背景ピンク） --- */
.bg-pink { 
  background: #f3e6ea;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: center;
 } 

.sasakiamerica { padding: 2.5rem 0; }
.sasakiamerica .amer-cols {
  display: flex;
  align-items: center;
  gap: 24px;
}
.sasakiamerica .amer-copy,
.sasakiamerica .amer-photo { width: 50%; }

.sasakiamerica .amer-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* スマホ対応：縦積み */
@media (max-width: 800px) {
  .sasakiamerica .amer-cols { flex-direction: column; }
  .sasakiamerica .amer-copy,
  .sasakiamerica .amer-photo { width: 100%; }
}








/* スマホ時は縦積み */
@media (max-width: 800px) {
  .sasakitop .sasaki-cols { flex-direction: column; }
  .sasakitop .sasaki-col { width: 100%; }
  .sasakitop .sasaki-copy { padding-left: 0; }
}


/* --- sasakihukyo（左画像・右テキスト、各50%） --- */
.bg-pink { background: #f3e6ea; }  /* 既出の淡いピンク */

.sasakihukyo { padding: 2.5rem 0; }
.sasakihukyo .hukyo-cols {
  display: flex;
  align-items: center;   /* 上下中央揃え */
  gap: 24px;
}
.sasakihukyo .hukyo-photo,
.sasakihukyo .hukyo-copy { width: 50%; }

.sasakihukyo .hukyo-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* テキスト側の左右余白 */
.sasakihukyo .hukyo-copy {
  padding-left: 15px;
  padding-right: 15px;   /* ← 指定どおり */
}

/* スマホ対応：縦積み */
@media (max-width: 800px) {
  .sasakihukyo .hukyo-cols { flex-direction: column; }
  .sasakihukyo .hukyo-photo,
  .sasakihukyo .hukyo-copy { width: 100%; }
  .sasakihukyo .hukyo-copy { padding-left: 12px; padding-right: 12px; }
}

.sasakirinzaiji{
  background: #f3e6ea;
  padding:30px 100px 30px 100px;
  justify-content:center;
}

.sasaki-mountboldy-photo img {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.sasaki-mountboldy-photo figcaption {
  margin-top: 8px;
  line-height: 1.5;
  font-size: 25px;
  text-align: center;
}

/* sasakicohen：コーエン節（背景ピンク／h2中央／p余白／表紙70%） */
.bg-pink { background: #f3e6ea; }  /* 既存ユーティリティ */

.sasakicohen h2 { 
  text-align: center; 
  padding-top:30px;
}

.sasakicohen p { padding: 30px; }

.sasakicohen .cohen-cover {
  width: 25%;
  margin: 12px auto 0;   /* 左右中央揃え */
  text-align: center;
}
.sasakicohen .cohen-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.sasakicohen .cohen-photo {
  width: 40%;
  margin: 12px auto 0;   /* 左右中央揃え */
  text-align: center;
}
.sasakicohen .cohen-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 拠点セクション：背景写真＋ベール＋白文字 --- */
.sasakikyoten{
  /* 背景画像 + ベール（やや暗い） */
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("./images/zenndou.jpg");  /* 画像の置き場所に合わせてパス調整 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;                /* 文字は白 */
  padding: 32px 16px 32px 32px;         /* 読みやすい余白（必要に応じて調整可） */
}

/* 見出し・本文・リンクも白で統一（inheritで拾えない場合の保険） */
.sasakikyoten h2,
.sasakikyoten h3,
.sasakikyoten p,
.sasakikyoten li { color: #fff; }

/* 文字をわずかに浮かせて可読性UP（任意） */
.sasakikyoten h2, .sasakikyoten h3, .sasakikyoten p, .sasakikyoten li {
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* --- 拠点セクション２：背景写真＋ベール＋白文字 --- */
.sasakikyoten2{
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("./images/nyuudou.jpg");   /* 画像パスは配置に合わせて調整 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  padding: 32px 16px;
}

/* 見出し・本文なども白で確実に */
.sasakikyoten2 h2,
.sasakikyoten2 h3,
.sasakikyoten2 p,
.sasakikyoten2 li { color: #fff; }

/* 可読性UP（任意） */
.sasakikyoten2 h2, .sasakikyoten2 h3, .sasakikyoten2 p, .sasakikyoten2 li {
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* --- sasaki100：左写真／右テキスト（背景ピンク） --- */
.bg-pink { background: #f3e6ea; } /* 既存のピンク */

.sasaki100 { padding: 2.5rem 0; }
.sasaki100 .s100-cols {
  display: flex;
  align-items: center;
  gap: 24px;
}
.sasaki100 .s100-photo,
.sasaki100 .s100-copy { width: 50%; }

/* 画像体裁 */
.sasaki100 .s100-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px; /* 角丸不要なら削除OK */
}

/* 文言のパディング指定 */
.sasaki100 .s100-copy { padding: 15px; }

/* スマホで縦積み */
@media (max-width: 800px) {
  .sasaki100 .s100-cols { flex-direction: column; }
  .sasaki100 .s100-photo,
  .sasaki100 .s100-copy { width: 100%; }
  .sasaki100 .s100-copy { padding: 12px; }
}

/* sasaki100直下：写真+キャプション（中央・70%） */
.sasaki100-photo2 .s100p2-figure{
  width: 70%;
  margin: 0 auto;          /* 左右中央 */
  padding: 30px 0;         /* 上下30px */
  text-align: center;
}
.sasaki100-photo2 img{
  width: 100%;
  height: auto;
  display: block;
}
.sasaki100-photo2 .s100p2-caption{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
}
.sasaki100-photo2 {
  background-color: #f2f2f2;
}


@media (max-width: 800px){
  .sasaki100-photo2 .s100p2-figure{ width: 90%; padding: 24px 0; }
  .sasaki100-photo2 .s100p2-caption{ font-size: 20px; }
}


/* --- kouryu：左写真／右テキスト（背景ピンク） --- */
.bg-pink { background: #f3e6ea; }  /* 既出のピンクユーティリティ */

.kouryu { padding: 2.5rem 0; }
.kouryu .kouryu-cols {
  display: flex;
  align-items: center;
  gap: 24px;
}
.kouryu .kouryu-photo,
.kouryu .kouryu-copy { width: 50%; }

/* 画像体裁 */
.kouryu .kouryu-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px; /* 角丸不要なら削除OK */
}

/* 文言の余白 */
.kouryu .kouryu-copy { padding: 30px; }

/* スマホで縦積み */
@media (max-width: 800px) {
  .kouryu .kouryu-cols { flex-direction: column; }
  .kouryu .kouryu-photo,
  .kouryu .kouryu-copy { width: 100%; }
  .kouryu .kouryu-copy { padding: 16px; }
}

/* --- outou：背景写真＋ベール／白文字、テキスト幅50% --- */
.outou{
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("./images/妙心寺本堂.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 32px 16px;
}

.outou .outou-cols{
  display: flex;
  align-items: center;
}

.outou .outou-copy{
  width: 50%;
  padding: 30px;
}

/* テキストは確実に白 */
.outou h2, .outou h3, .outou p, .outou li { color: #fff; }

/* モバイル（縦積み） */
@media (max-width: 800px){
  .outou .outou-copy{ width: 100%; padding: 20px; }
}

/* --- kanzan：左テキスト／右写真、各50%（背景ピンク） --- */
.bg-pink { background: #f3e6ea; } /* 既存ユーティリティ */

.kanzan { padding: 2.5rem 0; }
.kanzan .kanzan-cols {
  display: flex;
  align-items: center;
  gap: 24px;
}
.kanzan .kanzan-copy,
.kanzan .kanzan-photo { width: 50%; }

.kanzan .kanzan-copy { padding: 30px; }

.kanzan .kanzan-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px; /* 角丸不要なら削除OK */
}

/* スマホ時は縦積み */
@media (max-width: 800px){
  .kanzan .kanzan-cols { flex-direction: column; }
  .kanzan .kanzan-copy,
  .kanzan .kanzan-photo { width: 100%; }
  .kanzan .kanzan-copy { padding: 16px; }
}

/* outoukanmimyodaishi：グレー背景＋文言30px＋写真60% */
.bg-gray { background: #f2f2f2; }  /* 以前使ったグレー */

.outoukanmimyodaishi .okm-copy { padding: 30px; }

.outoukanmimyodaishi .okm-photo {
  width: 60%;
  margin: 16px auto;     /* 左右中央揃え */
  text-align: center;
}
.outoukanmimyodaishi .okm-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* モバイル時（任意）：写真を少し広げたい場合 */
@media (max-width: 800px){
  .outoukanmimyodaishi .okm-photo { width: 90%; }
}

/* --- 道忠（doutyu）：左右2カラム化 --- */
.doutyu{
  display: flex;
  align-items: flex-start;
  gap: 24px;            /* 段落間のすき間 */
  border: 4px solid #333;
  margin:30px
}

.doutyu .doutyu1,
.doutyu .doutyu2{
  width: 50%;
  padding: 30px;
  box-sizing: border-box; /* paddingを含めて50%に */
}

/* スマホでは縦積み */
@media (max-width: 800px){
  .doutyu{ flex-direction: column; }
  .doutyu .doutyu1,
  .doutyu .doutyu2{ width: 100%; padding: 20px; }
}



.tousyoku{
 background-color: #f2f3f5;
}

.tousyoku h2{
  text-align: center;
  padding-top: 30px
}

/* --- tousyoku：写真70%中央／本文は左右15%余白で70% --- */
.tousyoku .tousyoku-photo{
  width: 70%;
  margin: 0 auto;        /* 左右中央揃え */
  text-align: center;
}
.tousyoku .tousyoku-photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* p（tousyoku1,2）を写真幅と揃える */
.tousyoku .tousyoku1,
.tousyoku .tousyoku2{
  width: 70%;
  margin: 0 auto;          /* 左右中央揃え（写真と同じ外形） */
  padding: 16px 0;         /* 上下だけ余白。必要に応じて調整 */
}

/* モバイル（任意）：読みやすく少し広げる */
@media (max-width: 800px){
  .tousyoku .tousyoku-photo,
  .tousyoku .tousyoku1,
  .tousyoku .tousyoku2{ width: 90%; padding-left: 5%; padding-right: 5%; }
}


/* --- munan：左テキスト／右画像、背景ピンク --- */
.munan { padding: 40px 0; }
.bg-pink { background: #f3e6ea; } /* 既存のピンクと同一トーン */

.munan .munan-cols{
  display: flex;
  align-items: center;
  gap: 24px;
}

.munan .munan-copy,
.munan .munan-photo{ width: 50%; }

.munan .munan-copy{ padding: 30px; }

.munan .munan-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* モバイルで縦積み */
@media (max-width: 800px){
  .munan .munan-cols{ flex-direction: column; }
  .munan .munan-copy,
  .munan .munan-photo{ width: 100%; }
}

/* --- doukyo：左テキスト／右写真、各50%／セクションmargin:0 --- */
.doukyo {
   margin: 0;
   background-color: #f3e6ea;
 }

.doukyo .doukyo-cols {
  display: flex;
  align-items: center;
  gap: 24px;
}

.doukyo .doukyo-copy,
.doukyo .doukyo-photo { width: 50%; }

.doukyo .doukyo-copy { padding: 30px; }

.doukyo .doukyo-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* スマホでは縦積み */
@media (max-width: 800px){
  .doukyo .doukyo-cols { flex-direction: column; }
  .doukyo .doukyo-copy,
  .doukyo .doukyo-photo { width: 100%; }
  .doukyo .doukyo-copy { padding: 20px; }
}

/* --- oitachi：左写真／右文言（背景グレー） --- */
.bg-gray { background: #f2f2f2; } /* 既存のグレー。未定義ならこの行を残す */

.oitachi { padding: 2.5rem 0; }
.oitachi .oitachi-cols{
  display: flex;
  align-items: center;
  gap: 24px;
}
.oitachi .oitachi-photo,
.oitachi .oitachi-copy{ width: 50%; }

.oitachi .oitachi-copy{ padding: 30px; }

.oitachi .oitachi-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* スマホでは縦積み */
@media (max-width: 800px){
  .oitachi .oitachi-cols{ flex-direction: column; }
  .oitachi .oitachi-photo,
  .oitachi .oitachi-copy{ width: 100%; }
  .oitachi .oitachi-copy{ padding: 20px; }
}

.etansyukke{
 background: #f2f2f2;  /* 既存のグレー*/
 padding: 100px
}

.etansyukke p{
  font-size:1rem;
}

.etankikyo{
  background-color: #f3e6ea; /* 既存のピンクと同一トーン */
  padding:100px
}

/* --- etanmuyoku：左写真／右テキスト、各50%（背景グレー） --- */
.etanmuyoku { padding: 2.5rem 0; }

.etanmuyoku .etanmuyoku-cols{
  display: flex;
  align-items: center;
  gap: 24px;
}

.etanmuyoku .etanmuyoku-photo,
.etanmuyoku .etanmuyoku-copy { width: 50%; }

.etanmuyoku .etanmuyoku-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.etanmuyoku .etanmuyoku-copy{ padding: 30px; }

/* スマホで縦積み */
@media (max-width: 800px){
  .etanmuyoku .etanmuyoku-cols{ flex-direction: column; }
  .etanmuyoku .etanmuyoku-photo,
  .etanmuyoku .etanmuyoku-copy{ width: 100%; }
  .etanmuyoku .etanmuyoku-copy{ padding: 20px; }
}

.etankokou{
  background: #f2f3f5;
  padding:30px
}


.meigen{
  background-color: #f3e6ea; /* 既存のピンクと同一トーン */
}

.meigen .meigen-photo img{
  width: 55%;
  display: block;
  margin: 0 auto;
}


/* --- etansenge：末期の一句（背景グレー／h2中央／p左右100px／画像60%中央） --- */
.etansenge h2 { text-align: center; 
padding-top:30px;
padding-bottom:30px;
}

.etansenge p {
  padding: 0 100px;     /* 左右100px */
  line-height: 1.9;
}

.etansenge .etansenge-photo {
  width: 60%;
  margin: 12px auto 0;  /* 左右中央 */
  text-align: center;
}
.etansenge .etansenge-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* モバイル最適化（任意） */
@media (max-width: 800px){
  .etansenge p { padding: 0 20px; }
  .etansenge .etansenge-photo { width: 90%; }
}

/* --- hukkou：背景ピンク／h2中央（上下30px）／p左右100px／画像50%中央 --- */
.bg-pink { background: #f3e6ea; } /* 既存ユーティリティを再利用 */

.hukkou h2 {
  text-align: center;
  padding: 30px 0;  /* 上下30px */
}

.hukkou p {
  padding: 0 100px; /* 左右100px */
  line-height: 1.9;
}

.hukkou .hukkou-photo {
  width: 50%;
  margin: 12px auto 0;  /* 左右中央揃え */
  text-align: center;
}
.hukkou .hukkou-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* モバイル最適化（任意） */
@media (max-width: 800px){
  .hukkou p { padding: 0 20px; }
  .hukkou .hukkou-photo { width: 90%; }
}

/* banryou：左写真50%／右本文50%、背景は上品な薄グレー */
.banryou {
  display: flex;
  background: #f2f3f5;     /* 既存で使っているグレーと同系 */
  min-height: 360px;
}

.banryou-photo,
.banryou-body {
  width: 50%;
}

.banryou-photo {
  margin: 0;
  overflow: hidden;         /* 縦横比が違う写真でも自然にトリミング */
}

.banryou-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banryou-body {
  padding: 30px;            /* 指定どおり */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 文章を縦方向で中央寄せ（任意） */
}

/* モバイル保険 */
@media (max-width: 720px) {
  .banryou { flex-direction: column; }
  .banryou-photo, .banryou-body { width: 100%; }
  .banryou-photo img { height: auto; } /* 高さ制約を外して自然な比率に */
}

/* zuiryuuji：左写真50%／右本文50%、背景白 */
.zuiryuuji {
  display: flex;
  background: #fff;
  min-height: 360px;
}

.zuiryuuji-photo,
.zuiryuuji-body {
  width: 50%;
}

.zuiryuuji-photo {
  margin: 0;
  overflow: hidden;            /* 縦横比が違ってもきれいに表示 */
}

.zuiryuuji-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zuiryuuji-body {
  padding: 30px;               /* 指定どおり */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* 文章を縦中央（任意） */
}

/* モバイル保険 */
@media (max-width: 720px) {
  .zuiryuuji { flex-direction: column; }
  .zuiryuuji-photo, .zuiryuuji-body { width: 100%; }
  .zuiryuuji-photo img { height: auto; }
}

.zuiryuujituduki{
  width:100%
}

.zuiryuujituduki p{
  padding:30px 100px 30px 100px;
}


/* jyouten：左テキスト／右写真の2カラム、各50% */
.jyouten { /* 背景は .bg-pink で付与済み */ }
.jyouten-cols {
  display: flex;
  gap: 0;
  align-items: stretch;
  min-height: 360px;
}
.jyouten-copy,
.jyouten-photo { width: 50%; }

.jyouten-copy {
  padding: 30px;                 /* 指定どおり */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.jyouten-photo { margin: 0; overflow: hidden; }
.jyouten-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* モバイル保険 */
@media (max-width: 720px) {
  .jyouten-cols { flex-direction: column; min-height: auto; }
  .jyouten-copy, .jyouten-photo { width: 100%; }
  .jyouten-photo img { height: auto; }
}


/* sasakijyousyu：左テキスト／右写真、背景白 */
.sasakijyousyu {
  background: #fff;
}
.sj-cols {
  display: flex;
  align-items: stretch;
  min-height: 360px;
}
.sj-copy, .sj-photo { width: 50%; }

.sj-copy {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sj-photo { margin: 0; overflow: hidden; }
.sj-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* モバイル保険 */
@media (max-width: 720px) {
  .sj-cols { flex-direction: column; min-height: auto; }
  .sj-copy, .sj-photo { width: 100%; }
  .sj-photo img { height: auto; }
}

/* toamerica：左テキスト／右写真、背景ピンク（.bg-pinkが無くてもOKにしておく） */
.toamerica { background: #f3e6ea; } /* 既存ピンクのトーン */
.toamerica-cols {
  display: flex;
  align-items: stretch;
  min-height: 360px;
}
.toamerica-copy,
.toamerica-photo { width: 50%; }

.toamerica-copy {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.toamerica-photo { margin: 0; overflow: hidden; }
.toamerica-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* モバイル保険 */
@media (max-width: 720px) {
  .toamerica-cols { flex-direction: column; min-height: auto; }
  .toamerica-copy, .toamerica-photo { width: 100%; }
  .toamerica-photo img { height: auto; }
}


/* 背景に写真＋ベール、本文ボックスを左上寄りに配置 */
.sasakiroushinooshie {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-start;            /* ← 縦中央ではなく上寄せに */
  background-image: url('./images/本堂の中.jpg'); /* 背景写真 */
  background-size: cover;
  background-position: center;
}
.sasakiroushinooshie::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.65); /* ← 白のベールを全面に */
}

/* wrapの中央寄せを無効化して左余白ゼロに */
.sasakiroushinooshie .wrap {
  width: 100%;
  margin: 0;        /* ← 左の謎の余白をなくす */
  padding: 0;
}

.sasakiroushinooshie .sro-body {
  position: relative;           /* ベールの上に載せる */
  z-index: 1;
  width: 50%;
  padding: 30px;
  margin: 0;                    /* ← 余白ゼロ */
  background: transparent;      /* ← ベールに任せる（ボックスは透明） */
  color: #222;
}

/* モバイル調整 */
@media (max-width: 720px) {
  .sasakiroushinooshie { min-height: 50vh; }
  .sasakiroushinooshie .sro-body {
    width: 100%;
    margin: 0;                 /* ← モバイルでも余白ゼロ */
    padding: 20px;
  }
}

/* houkei：背景画像を全面に（cover） */
.houkei {
  position: relative;
  background-image: url('./images/houkeizuhaikei.png');
  background-size: cover;       /* 画面全体をカバー */
  background-position: center;  /* 中央に配置 */
  background-repeat: no-repeat; /* 繰り返しなし */
  padding:50px
}


/* 全幅写真セクション */
.photo-full { margin: 0; padding: 0; }
.photo-full img {
  width: 100%;
  height: auto;
  display: block;
}



/* ここからびわこ１０８霊場会御朱印*/

/* びわ湖108：トップ案内（背景画像＋ベール＋縦積み・中央寄せ） */
.biwakotop {
  position: relative;
  min-height: 48vh;
  padding: 2.5rem 1rem;
  text-align: center;               /* h1/h2 を左右中央 */
  color: #fff;                      /* 見出しは白 */
  background-image: url('./images/konnzesann.JPG');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.biwakotop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38);      /* 背景を少し暗く */
}
.biwakotop > * { position: relative; z-index: 1; }

.biwakotop h1  { 
  margin: 0 0 .6rem;
  line-height:1.6;
   }
.biwakotop h2 { 
  margin: 0 0 .6rem;
  line-height:2.5;
   }

/* CTAも中央寄せ */
.biwakotop .cta { 
  text-align: center; 
  margin-top: .75rem; 
}
/* びわ湖108のCTAだけ白いボタンに */
.biwakotop .button {
  border-color: #fff;
  color: #fff;
}
.biwakotop .button:hover {
  background: #fff;   /* 反転 */
  color: #333;        /* 文字は濃いグレーで可読性確保 */
  border-color: #fff;
}

/* reijyousetumei1：画像70%＋左右中央、figureの外側余白もゼロに */
.reijyousetumei1 figure { margin: 0; }
.reijyousetumei1 img {
  display: block;
  width: 70%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;   /* ← 左右中央 */
}

.reijyousetumei1 h1,
.reijyousetumei1 h2 {
  padding: 10px 200px 10px 200px;       /* ← 指定どおり。必要なら後で上/左右/下を分けて調整可 */
}

.reijyousetumei1 { background: #f2f2f2; } /* 以前のグレーに統一 */

/* モバイル保険：少し軽くする（任意） */
@media (max-width: 720px) {
  .reijyousetumei1 img { width: 92%; }
  .reijyousetumei1 h1,
  .reijyousetumei1 h2 { padding: 40px; }
}


/* reijyousetumei2：左写真50%／右テキスト50%、背景白 */
.reijyousetumei2 {
  display: flex;
  background: #fff;
}

.reijyousetumei2-photo,
.reijyousetumei2-body { width: 50%; }

/* 右カラム：見出し2つをセットで上下中央揃え */
.reijyousetumei2-body {
  display: flex;
  flex-direction: column;
  justify-content: center; /* ← 縦方向の中央寄せ */
  /* 任意：読みやすい最小高さ */
  min-height: 360px;
}


.reijyousetumei2-photo {
  margin: 0;
  overflow: hidden;
}
.reijyousetumei2-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画面比に合わせて自然にトリミング */
  display: block;
}

/* 見出しのパディング：10px 30px 10px 30px */
.reijyousetumei2-body h1,
.reijyousetumei2-body h2 {
  padding: 10px 30px;
  margin: 0;          /* 行間調整のため余白ゼロから開始（必要なら後で調整） */
}

/* モバイル：縦積み */
@media (max-width: 720px) {
  .reijyousetumei2 { flex-direction: column; }
  .reijyousetumei2-photo, .reijyousetumei2-body { width: 100%; }
  .reijyousetumei2-photo img { height: auto; } /* 小画面は自然比率 */
}


/* 御朱印：左テキスト／右写真、各50%、背景＝既存グレー */
.gosyuin {
  display: flex;
  background: #f2f3f5; /* 以前使ったグレー */
}

.gosyuin-body,
.gosyuin-photo { width: 50%; }

/* 文言：上下中央＆指定パディング */
.gosyuin-body {
  display: flex;
  flex-direction: column;
  justify-content: center;        /* 上下中央 */
  padding: 10px 30px;             /* 指定どおり */
}
.gosyuin-body h1,
.gosyuin-body h2 { margin: 0 0 .5rem; }

/* 画像：右カラムいっぱいに */
.gosyuin-photo { margin: 0; overflow: hidden; }
.gosyuin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* モバイル：縦積み */
@media (max-width: 720px) {
  .gosyuin { flex-direction: column; }
  .gosyuin-body, .gosyuin-photo { width: 100%; }
  .gosyuin-photo img { height: auto; }
}


/* mangan：写真70%で中央、h1も中央揃え */
.mangan figure { margin: 0; }
.mangan img {
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;        /* 左右中央 */
}
.mangan h1 {
  text-align: center;    /* 見出し中央 */
  margin: 0.5rem 0;      /* お好みで調整可 */
}

/* モバイルでは画像を少し広めに */
@media (max-width: 720px) {
  .mangan img { width: 92%; }
}


/* oumisaigoku：画像 70% 中央／文言は padding-top 30px, padding-right 15% */
.oumisaigoku figure { margin: 0; }
.oumisaigoku img {
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;         /* 左右中央 */
}

/* oumisaigoku：h1 を中央寄せ＋指定の余白 */
.oumisaigoku h1 {
  text-align: center;
  padding-top: 30px;
  padding-right: 15%;
  margin: 0;
}

/* 左端だけ画像と揃える：左15%に寄せる */
.oumisaigoku p {
  margin-left: 15%;
  padding-top: 30px;    /* 必要なら残す */
  padding-right: 15%;   /* 右側の余白を維持したい場合 */
}




/* モバイルで右余白がきつい場合の保険（任意） */
@media (max-width: 720px) {
  .oumisaigoku img { width: 92%; }
  .oumisaigoku h2,
  .oumisaigoku p { padding-right: 6%; }
}

/* 近江西国霊場 専用納経帖：左テキスト50%／右写真50%、背景ピンク */
.omusaigokunoukyou {
  display: flex;
  background: #f3e6ea;  /* 以前使ったピンク */
}

.om-noukyou-body,
.om-noukyou-photo { width: 50%; }

/* 文言：上下中央＋padding 30px */
.om-noukyou-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}
.om-noukyou-body h2 { margin: 0 0 .5rem; }

/* 写真：右カラムいっぱいに表示 */
.om-noukyou-photo { margin: 0; overflow: hidden; }
.om-noukyou-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* モバイルで縦積み */
@media (max-width: 720px) {
  .omusaigokunoukyou { flex-direction: column; }
  .om-noukyou-body, .om-noukyou-photo { width: 100%; }
  .om-noukyou-photo img { height: auto; }
}


/* shakyou：背景全面＋白ベール、左側に本文ブロックを配置 */
.shakyou {
  position: relative;
  min-height: 60vh;
  background-image: url('./images/syakyou.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.shakyou::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.65); /* ベール（濃さはお好みで） */
}

/* 左側の本文ボックス */
.shakyou .shakyou-body {
  position: relative;       /* ベールの上に出す */
  z-index: 1;
  width: 50%;
  margin-top: 100px;
  margin-left: 50px;
  /* 必要なら読みやすさ向上のため背景追加可：
  background: rgba(255,255,255,.85); border-radius: .5rem; padding: 20px;
  */
}

/* モバイルでは全幅に */

@media (max-width: 720px) {
  .shakyou { min-height: 50vh; }
  .shakyou .shakyou-body {
    width: 100%;
    margin: 20px 0 0 0;
  }
}


/*ここからWEB妙感寺展*/

/* ---------- Generic 2-column split (50/50) ---------- */
.split { display: flex; align-items: center; gap: 24px; }
.split .col { width: 50%; }
@media (max-width: 800px){
  .split { flex-direction: column; }
  .split .col { width: 100%; }
}

/* ---------- 2-column utility for .split ---------- */
.split { display: flex; align-items: center; gap: 24px; }
.split .col { width: 50%; }
@media (max-width: 800px){
  .split { flex-direction: column; }
  .split .col { width: 100%; }
}


/* ---------- 2-column utility for .split ---------- */
.split { display: flex; align-items: center; gap: 24px; }
.split .col { width: 50%; }

/* 画面が狭い時だけ縦積みにする。
   ※ 横並びを優先したいなら 560px など“より狭い値”に下げる */
@media (max-width: 560px){
  .split { flex-direction: column; }
  .split .col { width: 100%; }
}
/* daishizou：左写真を列幅にフィット */
.daishizou .col img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- rokusoden：背景ピンク、画像60%・中央揃え --- */
.rokusoden { padding: 50px; }

.rokusoden .rokusoden-photo img{
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto;        /* 左右中央 */
}

/* モバイルは全幅に */
@media (max-width: 800px){
  .rokusoden .rokusoden-photo img{ width: 100%; }
}


/* --- zenjigou：背景グレー、画像50%中央、画像下の文言に余白 --- */
.zenjigou { padding: 2rem 0; }                 /* セクション上下の余白 */
.zenjigou .zenjigou-photo img{
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto;                               /* 左右中央寄せ */
}
.zenjigou .zenjigou-body{ padding: 50px; }      /* 画像の下の文言に50px余白 */

/* モバイルは画像を全幅に */
@media (max-width: 800px){
  .zenjigou .zenjigou-photo img{ width: 100%; }
}

/* --- tyokushi：左右2カラム／背景白 --- */
.tyokushi { background: #fff; padding: 2rem 0; }

.tyokushi .tyokushi-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}

.tyokushi .tyokushi-flex > .col{ width: 50%; }

/* 画像はカラム幅にフィット */
.tyokushi .tyokushi-photo img{
  display: block;
  width: 100%;
  height: auto;
}

/* モバイルは縦積み */
@media (max-width: 800px){
  .tyokushi .tyokushi-flex{ flex-direction: column; }
  .tyokushi .tyokushi-flex > .col{ width: 100%; }
}

/* --- meijityokusyo：背景白、文言に50pxパディング、画像60% --- */
.meijityokusyo { background: #fff; padding: 2rem 0; }

.meijityokusyo .meijityokusyo-body { padding: 50px; }

.meijityokusyo .meijityokusyo-photo img{
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;      /* 左右中央寄せ */
}

/* モバイルでは画像を全幅に */
@media (max-width: 800px){
  .meijityokusyo .meijityokusyo-photo img{ width: 100%; }
}

/* --- tyokushihakenkiji：画像3枚を縦並び・各50%幅、背景ピンクは .bg-pink 利用 --- */
.tyokushihakenkiji { padding: 2rem 0; }

.tyokushihakenkiji .tyokushihakenkiji-photos img{
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto 1.25rem; /* 左右中央＋下に少し余白 */
}

/* 最後の画像の下だけ余白をなくす（任意） */
.tyokushihakenkiji .tyokushihakenkiji-photos figure:last-child img{
  margin-bottom: 0;
}

/* モバイルでは可読性優先で全幅に */
@media (max-width: 800px){
  .tyokushihakenkiji .tyokushihakenkiji-photos img{ width: 100%; }
}


/* --- kokushigou：2枚を横並び（各40%）＋ gap 5% --- */
.kokushigou { padding: 2rem 0; } /* 背景は .bg-gray を利用 */

.kokushigou .kokushigou-photos{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3%;                 /* 画像の間隔を5%に */
}

.kokushigou .kokushigou-photos .item{
  width: 45%;              /* 各要素を40%幅に */
}

.kokushigou .kokushigou-photos img{
  display: block;
  width: 100%;
  height: auto;
}

/* モバイルは縦積み */
@media (max-width: 800px){
  .kokushigou .kokushigou-photos{
    flex-direction: column;
    gap: 1rem;
  }
  .kokushigou .kokushigou-photos .item{
    width: 100%;
  }
}



/* --- syouwajituroku：左右並び・各43%／gap 3%・背景白 --- */
.syouwajituroku { background: #fff; padding: 2rem 0; }

.syouwajituroku .syouwajituroku-photos{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3%;
}

.syouwajituroku .syouwajituroku-photos .item{ width: 43%; }

.syouwajituroku .syouwajituroku-photos img{
  display: block;
  width: 100%;
  height: auto;
}

/* モバイルは縦積み（任意） */
@media (max-width: 800px){
  .syouwajituroku .syouwajituroku-photos{
    flex-direction: column;
    gap: 1rem;
  }
  .syouwajituroku .syouwajituroku-photos .item{ width: 100%; }
}

/* --- taimenzu：左画像・右本文（padding 30px）、背景は .bg-gray を使用 --- */
.taimenzu { padding: 2rem 0; }

.taimenzu .taimenzu-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}

.taimenzu .taimenzu-flex .col{ width: 50%; }

.taimenzu .taimenzu-photo img{
  display: block;
  width: 100%;
  height: auto;
}

.taimenzu .taimenzu-body{ padding: 30px; }

/* モバイルは縦積み */
@media (max-width: 800px){
  .taimenzu .taimenzu-flex{ flex-direction: column; }
  .taimenzu .taimenzu-flex .col{ width: 100%; }
  .taimenzu .taimenzu-body{ padding: 20px; } /* 少し軽めに */
}



/* --- nenjibutu：左画像・右本文（taimenzuと同じ） --- */
.nenjibutu { padding: 2rem 0; } /* 背景は .bg-gray を適用済み */

.nenjibutu .nenjibutu-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}

.nenjibutu .nenjibutu-flex .col{ width: 50%; }

.nenjibutu .nenjibutu-photo img{
  display: block;
  width: 100%;
  height: auto;
}

.nenjibutu .nenjibutu-body{ padding: 30px; }

/* モバイルは縦積み */
@media (max-width: 800px){
  .nenjibutu .nenjibutu-flex{ flex-direction: column; }
  .nenjibutu .nenjibutu-flex .col{ width: 100%; }
  .nenjibutu .nenjibutu-body{ padding: 20px; }
}


/* --- waka：左画像・右本文（taimenzu/nenjibutuと同じ） --- */
.waka { padding: 2rem 0; } /* 背景は .bg-gray を適用 */

.waka .waka-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}

.waka .waka-flex .col{ width: 50%; }

.waka .waka-photo img{
  display: block;
  width: 100%;
  height: auto;
}

.waka .waka-body{ padding: 30px; }

/* モバイルは縦積み */
@media (max-width: 800px){
  .waka .waka-flex{ flex-direction: column; }
  .waka .waka-flex .col{ width: 100%; }
  .waka .waka-body{ padding: 20px; }
}


/* --- WAKA セクションの修正：文言側のピンクを解除、固定高さを廃止、.waka-flex を横並びに --- */

/* セクション自体は HTML の .bg-gray を使う。高さ固定はしない */
.waka{ 
  padding: 2rem 0; 
  height: auto;              /* 旧: 360px を無効化 */
}

/* 実際に横並びにするのは .waka-flex （HTML構造に合わせる） */
.waka .waka-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}
.waka .waka-flex .col{ width: 50%; }

/* 画像は自然比率で収める（高さ固定しない） */
.waka .waka-photo{ margin: 0; overflow: visible; }
.waka .waka-photo img{
  width: 100%;
  height: auto;              /* 旧: height:100% を解除 */
  display: block;
  object-fit: contain;       /* 保険：比率維持で収める */
}

/* 文言側：ピンク背景を解除し、読みやすい余白だけ付与 */
.waka .waka-body{
  background: transparent;   /* 旧: #f3e6ea を解除 */
  padding: 30px;
}

/* スマホは縦積み */
@media (max-width: 800px){
  .waka .waka-flex{ flex-direction: column; }
  .waka .waka-flex .col{ width: 100%; }
  .waka .waka-body{ padding: 20px; }
}

/* --- 300yen：左テキスト／右画像、各50%（class~= で確実にヒット） --- */
section[class~="300yen"] { padding: 2rem 0; }

section[class~="300yen"] .yen300-flex{
  display: flex;
  align-items: center;
  justify-content: center;   /* ご指定どおり */
  gap: 24px;
}

section[class~="300yen"] .yen300-flex .col{ width: 50%; }

section[class~="300yen"] .yen300-body{ padding: 30px; }

section[class~="300yen"] .yen300-photo{ margin: 0; text-align: center; }
section[class~="300yen"] .yen300-photo img{
  display: block;
  width: 80%;        /* 列の80%に縮小 */
  max-width: 560px;  /* デスクトップでも拡がり過ぎない上限 */
  height: auto;
  margin: 0 auto;
}

/* モバイルは縦積み */
@media (max-width: 800px){
  section[class~="300yen"] .yen300-flex{ flex-direction: column; }
  section[class~="300yen"] .yen300-flex .col{ width: 100%; }
  section[class~="300yen"] .yen300-body{ padding: 20px; }
  section[class~="300yen"] .yen300-photo img{ width: 100%; max-width: 100%; }
}

/* --- keennbo：画像70%中央／本文に30px余白、背景は .bg-pink --- */
.keennbo { padding: 4rem 0; }

.keennbo h2{padding: 0 0 0 60px }

.keennbo .keennbo-photo img{
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;        /* 左右中央 */
}

.keennbo .keennbo-body{ padding: 0 60px 0 60px; }

/* モバイルは画像を全幅に */
@media (max-width: 800px){
  .keennbo .keennbo-photo img{ width: 100%; }
}

/* --- kihusya：h2の下に4列グリッド／全体70%／背景は .bg-pink --- */
.kihusya { padding: 2rem 0; }
.kihusya h2 { padding-left: 60px; }         /* ご指定 */

.kihusya .kihusya-photos{
  /* 70%の箱を中央に */
  width: 70%;
  margin: 0 auto;

  /* 4列グリッド */
  display: grid;
  grid-template-columns: repeat(4, 1fr);    /* = grid 4 1fr */
  gap: 0;
}

.kihusya .kihusya-photos img{
  display: block;
  width: 100%;
  height: auto;
}




/* kihusya：画像グリッドのすき間ゼロに */
.kihusya .kihusya-photos{
  gap: 0;                     /* グリッドのギャップをゼロ */
  justify-items: stretch;
  align-items: stretch;
}
.kihusya .kihusya-photos > figure{
  margin: 0;                  /* ← 既定の figure 余白を消す */
}


/* --- kihusya：各写真を同じサイズに揃える（トリミング方式） --- */
/* すき間ゼロはそのまま維持 */
.kihusya .kihusya-photos{ gap: 0; }

/* 1枚あたりの“枠”を同じ比率にする（例：3:4の縦長） */
.kihusya .kihusya-photos > figure{
  margin: 0;
  aspect-ratio: 3 / 4;  /* ← 正方形にしたい場合は 1 / 1 に */
  overflow: hidden;     /* はみ出す部分をカット */
}

/* 画像は枠いっぱいにフィット（中央でトリミング） */
.kihusya .kihusya-photos > figure > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;    /* 枠いっぱい＋歪みなし。端が少し切れます */
  object-position: center; /* 必要なら 'top' などに変更可 */
}



/* モバイル対応（任意）：画面幅に応じて列数を減らす */
@media (max-width: 1024px){
  .kihusya .kihusya-photos{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .kihusya .kihusya-photos{ grid-template-columns: repeat(2, 1fr); width: 90%; }
}
@media (max-width: 460px){
  .kihusya .kihusya-photos{ grid-template-columns: 1fr; width: 100%; }
}



/* --- syouwadaishigou：左画像・右本文（各50%） --- */
.syouwadaishigou { padding: 2rem 0; }  /* 背景は .bg-gray を適用 */

.syouwadaishigou .syouwadaishigou-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}

.syouwadaishigou .syouwadaishigou-flex .col{ width: 50%; }

.syouwadaishigou .syouwadaishigou-photo img{
  display: block;
  width: 100%;
  height: auto;
}

.syouwadaishigou .syouwadaishigou-body{ padding: 30px; }

/* モバイルでは縦積み */
@media (max-width: 800px){
  .syouwadaishigou .syouwadaishigou-flex{ flex-direction: column; }
  .syouwadaishigou .syouwadaishigou-flex .col{ width: 100%; }
  .syouwadaishigou .syouwadaishigou-body{ padding: 20px; }
}


/* --- haijyu：左画像・右本文（各50%） --- */
.haijyu { padding: 2rem 0; background: #fff; } /* bg-whiteがあればそちらでもOK */

.haijyu .haijyu-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}

.haijyu .haijyu-flex .col{ width: 50%; }

.haijyu .haijyu-photo img{
  display: block;
  width: 100%;
  height: auto;
}

.haijyu .haijyu-body{ padding: 30px; }

/* モバイル：縦積み */
@media (max-width: 800px){
  .haijyu .haijyu-flex{ flex-direction: column; }
  .haijyu .haijyu-flex .col{ width: 100%; }
  .haijyu .haijyu-body{ padding: 20px; }
}


/* syukuji（祝辞） */
.syukuji-flex{
  display: flex;
  align-items: flex-start;
  gap: 24px;           /* お好みで 2rem など */
}

.syukuji .col{
  flex: 1 1 0;         /* ← 50%固定をやめ、等分で縮むように */
  min-width: 0;        /* ← テキストのはみ出し防止 */
  box-sizing: border-box; /* ← paddingを幅に含める */
}

.syukuji-photo img{
  display: block;
  width: 100%;
  height: auto;
}

.syukuji-body{
  padding: 30px;
}

/* スマホ縦で縦並び（そのままでOK） */
@media (max-width: 900px){
  .syukuji-flex{ flex-direction: column; }
  .syukuji .col{ max-width: 100%; flex-basis: auto; }
  .syukuji-body{ padding: 20px 16px; }
}


/* --- yukiko：左写真／右文言（背景グレー） --- */
.bg-gray { background: #f2f2f2; } /* 既存のグレー */

.yukiko { padding: 2.5rem 0; }
.yukiko .yukiko-cols{
  display: flex;
  align-items: center;
  gap: 24px;
}
.yukiko .yukiko-photo,
.yukiko .yukiko-copy{ width: 50%; }

.yukiko .yukiko-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.yukiko .yukiko-copy{ padding: 30px; }

/* スマホでは縦積み */
@media (max-width: 800px){
  .yukiko .yukiko-cols{ flex-direction: column; }
  .yukiko .yukiko-photo,
  .yukiko .yukiko-copy{ width: 100%; }
  .yukiko .yukiko-copy{ padding: 20px; }
}


/* （未定義なら）背景グレー */
.bg-gray { background: #f2f2f2; }

/* tassyohoukoku：左写真／右テキスト、各50% */
.tassyohoukoku { padding: 2.5rem 0; }
.tassyohoukoku .tassyohoukoku-flex {
  display: flex;
  align-items: center;
  gap: 24px;
}
.tassyohoukoku .tassyohoukoku-photo,
.tassyohoukoku .tassyohoukoku-body { width: 50%; }
.tassyohoukoku .tassyohoukoku-body { padding: 30px; }

.tassyohoukoku .tassyohoukoku-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* スマホでは縦積み */
@media (max-width: 800px){
  .tassyohoukoku .tassyohoukoku-flex { flex-direction: column; }
  .tassyohoukoku .tassyohoukoku-photo,
  .tassyohoukoku .tassyohoukoku-body { width: 100%; }
  .tassyohoukoku .tassyohoukoku-body { padding: 20px; }
}


/* --- gudoukokusizouno：左写真／右文言（背景グレー） --- */
.gudoukokusizouno { padding: 2.5rem 0; }
.gudoukokusizouno .cols {
  display: flex;
  align-items: center;
  gap: 24px;
}
.gudoukokusizouno .photo,
.gudoukokusizouno .copy { width: 50%; }

.gudoukokusizouno .photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.gudoukokusizouno .copy { padding: 30px; }

@media (max-width: 800px){
  .gudoukokusizouno .cols { flex-direction: column; }
  .gudoukokusizouno .photo,
  .gudoukokusizouno .copy { width: 100%; }
  .gudoukokusizouno .copy { padding: 20px; }
}

/* --- gudoutyuukou：左写真／右文言（背景白） --- */
.bg-white { background:#fff; } /* 未定義なら追加 */

.gudoutyuukou { padding: 2.5rem 0; }
.gudoutyuukou .gudoutyuukou-cols{
  display:flex;
  align-items:center;
  gap:24px;
}
.gudoutyuukou .photo,
.gudoutyuukou .copy{ width:50%; }

.gudoutyuukou .photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.gudoutyuukou .copy{ padding:30px; }

/* スマホで縦積み */
@media (max-width:800px){
  .gudoutyuukou .gudoutyuukou-cols{ flex-direction:column; }
  .gudoutyuukou .photo,
  .gudoutyuukou .copy{ width:100%; }
  .gudoutyuukou .copy{ padding:20px; }
}


/* --- honnzonnsetumei：左写真／右文言（背景グレー） --- */
.bg-gray { background:#f2f2f2; } /* 未定義なら有効 */

.honnzonnsetumei { padding: 2.5rem 0; }
.honnzonnsetumei .cols{
  display:flex;
  align-items:center;
  gap:24px;
}
.honnzonnsetumei .photo,
.honnzonnsetumei .body{ width:50%; }

.honnzonnsetumei .photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.honnzonnsetumei .body{ padding:30px; }

/* スマホで縦積み */
@media (max-width:800px){
  .honnzonnsetumei .cols{ flex-direction:column; }
  .honnzonnsetumei .photo,
  .honnzonnsetumei .body{ width:100%; }
  .honnzonnsetumei .body{ padding:20px; }
}

/* --- honndousetumei：左写真／右文言（背景白） --- */
.bg-white { background:#fff; } /* 未定義なら有効化 */

.honndousetumei { padding: 2.5rem 0; }
.honndousetumei .cols{
  display:flex;
  align-items:center;
  gap:24px;
}
.honndousetumei .photo,
.honndousetumei .body{ width:50%; }

.honndousetumei .photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.honndousetumei .body{ padding:30px; }

/* スマホでは縦積み */
@media (max-width:800px){
  .honndousetumei .cols{ flex-direction:column; }
  .honndousetumei .photo,
  .honndousetumei .body{ width:100%; }
  .honndousetumei .body{ padding:20px; }
}

/* 背景ピンク（未定義なら） */
.bg-pink { background: #f3e6ea; }

/* tassyosetumei：本文＋下に画像（中央・幅70%） */
.tassyosetumei { padding: 2.5rem 0; }
.tassyosetumei h2 { text-align: center; }
.tassyosetumei p  { padding: 0px 140px 30px 140px; }

.tassyosetumei .tassyosetumei-photo {
  width: 70%;
  margin: 0 auto;       /* 左右中央 */
}
.tassyosetumei .tassyosetumei-photo img{
  display: block;
  width: 100%;
  height: auto;
}

/* スマホは画像幅100%に可変（任意） */
@media (max-width: 800px){
  .tassyosetumei .tassyosetumei-photo { width: 100%; }
}


/* --- taiga：左写真／右文言（各50%） --- */
.taiga { padding: 2.5rem 0; }
.taiga .taiga-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}
.taiga .taiga-photo,
.taiga .taiga-body{ width: 50%; }

.taiga .taiga-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.taiga .taiga-body{ padding: 30px; }

/* スマホで縦積み */
@media (max-width: 800px){
  .taiga .taiga-flex{ flex-direction: column; }
  .taiga .taiga-photo,
  .taiga .taiga-body{ width: 100%; }
  .taiga .taiga-body{ padding: 20px; }
}

/* 背景グレー（未定義なら） */
.bg-gray { background: #f2f2f2; }

/* taki：左写真／右テキスト（各50%） */
.taki { padding: 2.5rem 0; }
.taki .taki-flex{
  display: flex;
  align-items: center;
  gap: 24px;
}
.taki .taki-photo,
.taki .taki-body { width: 50%; }

.taki .taki-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.taki .taki-body { padding: 30px; }

/* スマホでは縦積み */
@media (max-width: 800px){
  .taki .taki-flex{ flex-direction: column; }
  .taki .taki-photo, .taki .taki-body { width: 100%; }
  .taki .taki-body { padding: 20px; }
}


/* --- sekiteisetumei：左写真／右文言（背景=白） --- */
.bg-white { background:#fff; } /* 未定義なら有効化 */

.sekiteisetumei { padding: 2.5rem 0; }
.sekiteisetumei .cols{
  display: flex;
  align-items: center;
  gap: 24px;
}
.sekiteisetumei .photo,
.sekiteisetumei .body{ width: 50%; }

.sekiteisetumei .photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.sekiteisetumei .body{ padding: 30px; }

/* スマホで縦積み */
@media (max-width: 800px){
  .sekiteisetumei .cols{ flex-direction: column; }
  .sekiteisetumei .photo,
  .sekiteisetumei .body{ width: 100%; }
  .sekiteisetumei .body{ padding: 20px; }
}







.sekiteisetumei-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 60%;         /* お好みで 50%/45% に */
  margin: 10px auto 0;
}
.sekiteisetumei-grid img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* スマホでも2列を維持（上書き） */
@media (max-width: 720px){
  .sekiteisetumei .sekiteisetumei-grid{
    grid-template-columns: repeat(2, 1fr);
    width: 90%;            /* 画面が狭いときは少し広げて見やすく */
  }
}


/* sekiteisetumei：写真グリッドを同じサイズに揃える */
.sekiteisetumei-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  column-gap: 5px;
  width: 90%;
  margin: 10px auto 0;
}

/* 各セルを同じ比率に。画像はトリミングで統一表示 */
.sekiteisetumei-grid figure{
  aspect-ratio: 4 / 3;   /* お好みで 3/2 や 1/1 でも可 */
  overflow: hidden;
}

.sekiteisetumei-grid figure img{
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  display: block;
}




/*これより頒布品の項目*/
/* --- goannnai：背景画像にベールをかける --- */
.goannnai{
  position: relative;
  background-image: url("./images/iketokoi.jpg"); /* 画像パス */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 24px 0; /* セクション上下の余白 */
}

/* ベール（白を被せて文字を読みやすく） */
.goannnai::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.80); /* ← 好みで濃さ調整 */
}

/* ベールの上にテキストを出す */
.goannnai > *{ position: relative; z-index: 1; }

/* 見出しは左右中央 */
.goannnai h1{ 
  text-align: center;
  margin: 0;
  padding: 16px 0;
}

/* h1 以外の文言にインデント（上右下左 = 10 0 10 150） */
.goannnai :is(p, ul, ol, h2, h3, h4, blockquote){
  padding: 10px 0 10px 150px;
}

/* モバイルではインデントを少し弱める（任意） */
@media (max-width: 800px){
  .goannnai :is(p, ul, ol, h2, h3, h4, blockquote){
    padding-left: 24px;
  }
}


/* 汎用CTA（塗りつぶし） */
.button.is-primary{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
  padding: .8rem 1.2rem;
  border-radius: .8rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  display: inline-block;
}
.button.is-primary:hover{
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.2);
}
.button.is-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(107,125,92,.55);
}

/* 汎用：CTAを中央寄せ */
.cta{ text-align: center; }

/* goannnai内のCTAは左150pxのインデントを解除（中央に） */
.goannnai .cta{ padding: 10px 0 !important; }




/* --- myoukannjisi：左写真／右文言（各50%・背景白） --- */
.myoukannjisi { padding: 2.5rem 0; background:#fff; }
.myoukannjisi .mkj-cols{
  display:flex;
  align-items:center;
  gap:24px;
}
.myoukannjisi .mkj-photo,
.myoukannjisi .mkj-copy{ width:50%; }

.myoukannjisi .mkj-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;  /* 縦長写真でも暴れない */
}

.myoukannjisi .mkj-copy{ padding:30px; }

/* スマホでは縦積み */
@media (max-width:800px){
  .myoukannjisi .mkj-cols{ flex-direction:column; }
  .myoukannjisi .mkj-photo,
  .myoukannjisi .mkj-copy{ width:100%; }
  .myoukannjisi .mkj-copy{ padding:20px; }
}


/* --- twentyfiveyears：左写真／右文言（各50%・背景グレー） --- */
.twentyfiveyears { padding: 2.5rem 0; }
.twentyfiveyears .tv-cols{
  display: flex;
  align-items: center;
  gap: 24px;
}
.twentyfiveyears .tv-photo,
.twentyfiveyears .tv-copy { width: 50%; }

.twentyfiveyears .tv-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* テキスト余白 */
.twentyfiveyears .tv-copy { padding: 30px; }

/* スマホで縦積み */
@media (max-width: 800px){
  .twentyfiveyears .tv-cols{ flex-direction: column; }
  .twentyfiveyears .tv-photo,
  .twentyfiveyears .tv-copy { width: 100%; }
  .twentyfiveyears .tv-copy { padding: 20px; }
}


/* --- thirtyyears：左写真／右文言（各50%・背景白） --- */
.thirtyyears { padding: 2.5rem 0; background:#fff; }
.thirtyyears .ty-cols{
  display:flex;
  align-items:center;
  gap:24px;
}
.thirtyyears .ty-photo,
.thirtyyears .ty-copy{ width:50%; }

.thirtyyears .ty-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
.thirtyyears .ty-copy{ padding:30px; }

/* スマホで縦積み */
@media (max-width:800px){
  .thirtyyears .ty-cols{ flex-direction:column; }
  .thirtyyears .ty-photo,
  .thirtyyears .ty-copy{ width:100%; }
  .thirtyyears .ty-copy{ padding:20px; }
}


/* --- hundredyears：左写真／右文言（各50%・背景白） --- */
.hundredyears { padding: 2.5rem 0; background:#fff; }
.hundredyears .hy-cols{
  display:flex;
  align-items:center;
  gap:24px;
}
.hundredyears .hy-photo,
.hundredyears .hy-copy{ width:50%; }

.hundredyears .hy-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
.hundredyears .hy-copy{ padding:30px; }

/* スマホで縦積み */
@media (max-width:800px){
  .hundredyears .hy-cols{ flex-direction:column; }
  .hundredyears .hy-photo,
  .hundredyears .hy-copy{ width:100%; }
  .hundredyears .hy-copy{ padding:20px; }
}


.hyouji{ padding-left : 100px;
         padding-right: 100px; }


/*これ以降お問い合わせの項目*/
/* ===== Contact（落ち着いたシンプル版） ===== */
.contact{
  --contact-ring: rgba(107,125,92,.22); /* var(--accent) #6b7d5c のやわらかい影色 */
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px clamp(16px, 4vw, 32px);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.contact h1{
  text-align: center;
  letter-spacing: .04em;
  margin: 0 0 .25rem;
}
.contact .lead{
  text-align: center;
  color: #555;
  margin: 0 0 1.2rem;
}

/* 連絡先の行間と罫線をやわらかく */
.contact ul{
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.contact ul li{
  padding: .45rem 0;
  border-top: 1px dashed var(--line);
}
.contact ul li:first-child{ border-top: 0; }
.contact a{ color: var(--accent); text-decoration: none; }
.contact a:hover{ text-decoration: underline; }

/* フォーム：余白とフォーカスを上品に */
.contact form{ display: grid; gap: .75rem; margin-top: .75rem; }
.contact label{ display: block; color: #333; font-weight: 600; }
.contact input, .contact textarea{
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact input:focus, .contact textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--contact-ring);
  outline: none;
}

/* 送信ボタンを中央に（CTAは既存デザインを使用） */
.contact .cta{ text-align: center; margin-top: .5rem; }

/* ちょい広め画面で内側余白を少し増やす */
@media (min-width: 840px){
  .contact{ padding: 32px 40px; }
}



/*ヘッダーとフッターの背景色の設定*/
/* === Header & Footer を少し濃いグレーに === */
:root{
  /* 必要に応じてここを微調整（例: #dcdcdc / #e0e0e0 / #d6d6d6） */
  --header-footer-bg: #e0e0e0;
}

.site-header,
.site-footer{
  background: var(--header-footer-bg);
}

/* ヘッダー内リンクのホバーが見やすいように少しだけ白っぽく反転 */
.site-header .site-nav a:hover{
  background: rgba(255,255,255,.35);
}

/* フッターの文字コントラストを少し強めに（任意） */
.site-footer{
  color: #444;
}
.site-footer a{
  color: inherit;
  text-decoration-color: rgba(0,0,0,.25);
}



/* ヘッダー左に小さなロゴを表示（全ページに適用） */
.site-header .brand {
  display: inline-flex;             /* 画像と文字を横並びに */
  align-items: center;
  gap: .5rem;                       /* 画像と文字の間隔 */
}

.site-header .brand::before {
  content: "";
  width: 28px;                      /* ロゴの大きさ（お好みで）*/
  height: 28px;
  background: url("./images/妙感寺看板.jpg") center / cover no-repeat;
  border-radius: .25rem;            /* 角を少し丸く（任意）*/
  flex: 0 0 28px;                   /* 幅を固定 */
}

/* ヘッダー：ブランド左／メニュー右に横並び */
.site-header .wrap{
  display:flex;
  align-items:center;
  gap:.75rem;           /* ブランドとナビの間隔 */
}
.site-nav{
  margin-left:auto;     /* 右寄せ */
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

/* （任意）ブランドとアイコンの整列をきれいに */
.brand{ display:flex; align-items:center; gap:.5rem; }

/* ブランド表記を2行固定「雲照山 / 妙感寺」 */
.site-header .brand{
  display: inline-flex;          /* アイコンと文字を横並び */
  align-items: center;
  gap: .5rem;
  color: transparent;            /* 元のテキストは非表示（読み上げは可） */
  text-shadow: none;
  position: relative;
}
.site-header .brand::after{
  content: "雲照山\A妙感寺";    /* ← 改行は \A を使う */
  white-space: pre;              /* \A を改行として表示 */
  color: #222;                   /* 文字色（必要なら調整） */
  line-height: 1.05;             /* 行間を詰める */
  font-weight: 700;              /* お好みで */
  display: block;
}
/* ブランド：アイコンのすぐ横に2行表示 */
.site-header .brand{
  display: inline-flex;
  align-items: center;
  gap: .25rem;        /* ← 0.25remに詰める（お好みで .2rem でも） */
  color: transparent; /* 元テキストは見せない */
  font-size: 0;       /* ★ 元テキストの“幅”も消す（これが肝） */
}

.site-header .brand::before{
  content: "";
  width: 28px; height: 28px;      /* アイコンサイズ（必要なら 24px に） */
  background: url("./images/妙感寺看板.jpg") center / cover no-repeat;
  border-radius: .25rem;
  flex: 0 0 auto;                 /* 余計な伸縮を防ぐ */
  margin: 0;                       /* 余白リセット */
}

.site-header .brand::after{
  content: "雲照山\A妙感寺";
  white-space: pre;                /* \A を改行として表示 */
  color: #222;
  line-height: 1.05;
  font-size: 1rem;                 /* ★ ここで表示用の文字サイズを復活 */
  font-weight: 700;
}

/* ヘッダーnav：アイコン込みで一行に（デスクトップ域） */
@media (min-width: 960px){
  .site-header .wrap{ flex-wrap: nowrap; }            /* 折り返さない */
  .site-nav{
    margin-left: auto;
    display: flex;
    gap: .5rem;                                       /* 余白を少し詰める（元 .75rem） */
    white-space: nowrap;                              /* 項目の改行を防ぐ */
  }
  .site-nav a{
    font-size: .90rem;                                /* 文字をひと回り小さく */
    padding: .32rem .55rem;                           /* 内側余白も少しだけ縮める */
  }
}

/* さらに横幅が厳しい場合の“もう一段小さく” */
@media (min-width: 960px) and (max-width: 1100px){
  .site-nav a{ font-size: .86rem; padding: .28rem .48rem; }
  .site-nav{ gap: .45rem; }
}










/*以下はCTAの汎用設定*/
/* 全CTAを共通デザインに */
.cta .button{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: .7rem 1.1rem;
  border-radius: .6rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .1s ease, filter .15s ease;
}
.cta .button:hover{
  transform: translateY(-1px);
  filter: brightness(0.95);
}

/* びわ湖108 も共通CTAに揃える */
.biwakotop .cta .button{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* アイコンと文字の間隔 */
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}

.brand-icon {
  width: 36px;      /* お寺の額の写真なので少し大きめでも上品 */
  height: auto;
  border-radius: 4px; /* 角を少しだけ丸めて自然に */
  object-fit: contain;
  display: block;
}

.site-nav {
  flex-wrap: wrap;
}

.site-nav a.active {
  color: #b46c00;              /* 上品な金茶色（仏金） */
  font-weight: 700;
  border-bottom: 2px solid #b46c00;
}

.site-nav a.active:hover {
  color: #a05d00;
  border-bottom-color: #a05d00;
}


/* ===== HEROフェードイン効果 ===== */
.hero {
  opacity: 0;
  animation: heroFadeIn 1s ease-out forwards;
  background-color: #000; /* 最初は黒背景 */
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* hero内の文字も少し遅れて浮かぶ演出 */
.hero-inner {
  opacity: 0;
  transform: translateY(10px);
  animation: textFadeIn 1.2s ease-out 0.2s forwards;
}

@keyframes textFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0.3rem 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* 幅が足りないときだけ折り返す */
  height: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

@media (max-width: 640px) {
  .brand {
    font-size: 1rem;
  }
  .brand-icon {
    width: 28px;
  }
  .site-nav a {
    font-size: 0.9rem;
  }
}

/* PCでは横並び */
.intro-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* スマホでは縦並び（画像→文章） */
@media (max-width: 768px) {
  .intro-wrap {
    flex-direction: column; /* ← これがポイント！ */
  }

  .intro-img,
  .intro-text {
    width: 100%; /* 横幅いっぱいに */
  }

  .intro-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .intro-text {
    text-align: left;
    padding: 1rem 0;
  }
}

@media (max-width: 768px) {
  .intro .intro-wrap {
    display: flex;
    flex-direction: column !important;
  }

  .intro-img,
  .intro-text {
    width: 100% !important;
  }

  .intro-img img {
    width: 100%;
    height: auto;
    display: block;
  }
}
@media (max-width: 720px){
  .poem-row { 
    flex-direction: column; 
    gap: 1rem; 
  }
  .poem-figure,
  .poem-row .poem {
    width: 100%;
  }
}

@media (max-width: 720px){
  .access-row { 
    flex-direction: column; 
    gap: 1rem; 
  }
  .access-map,
  .access-body {
    width: 100%;
  }
}

/* --- yuiso.html スマホ用縦積み対応 --- */
@media (max-width: 720px) {

  /* 万霊（banryou） */
  .banryou {
    flex-direction: column;
  }
  .banryou-photo,
  .banryou-body {
    width: 100%;
  }
  .banryou-photo img {
    height: auto;
  }

  /* 瑞龍寺（zuiryuuji） */
  .zuiryuuji {
    flex-direction: column;
  }
  .zuiryuuji-photo,
  .zuiryuuji-body {
    width: 100%;
  }
  .zuiryuuji-photo img {
    height: auto;
  }

  /* 復興（hukkou） */
  .hukkou .hukkou-photo {
    width: 90%;
  }
  .hukkou p {
    padding: 0 20px;
  }
}

/* --- yuiso.html：スマホ時は縦並びに（共通セット） --- */
@media (max-width: 720px){

  /* 2カラム → 縦積み */
  .souken,
  .waka,
  .sanzen,
  .mikumo,
  .tyuukou,
  .kokushi,
  .daishi,
  .korekara {
    flex-direction: column !important;
    height: auto !important;   /* 固定高さを解除 */
  }

  /* 左右50% → 全幅100% */
  .souken .souken-body, .souken .souken-photo,
  .waka .waka-body, .waka .waka-photo,
  .sanzen .sanzen-body, .sanzen .sanzen-photo,
  .mikumo .mikumo-body, .mikumo .mikumo-photo,
  .tyuukou .tyuukou-body, .tyuukou .tyuukou-photo,
  .kokushi .kokushi-body, .kokushi .kokushi-photo,
  .daishi .daishi-body, .daishi .daishi-photo,
  .korekara .korekara-body, .korekara .korekara-photo {
    width: 100% !important;
  }

  /* 画像の高さを自然比率に戻す（coverトリミングを解除） */
  .souken .souken-photo,
  .waka .waka-photo,
  .sanzen .sanzen-photo,
  .mikumo .mikumo-photo,
  .tyuukou .tyuukou-photo,
  .kokushi .kokushi-photo,
  .daishi .daishi-photo,
  .korekara .korekara-photo {
    height: auto !important;   /* 360〜430px などの固定を解除 */
    overflow: visible;
  }
  .souken .souken-photo img,
  .waka .waka-photo img,
  .sanzen .sanzen-photo img,
  .mikumo .mikumo-photo img,
  .tyuukou .tyuukou-photo img,
  .kokushi .kokushi-photo img,
  .daishi .daishi-photo img,
  .korekara .korekara-photo img {
    width: 100%;
    height: auto !important;
    object-fit: contain; /* 必要なら cover に戻してOK */
  }
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* ← 中央寄せを左寄せに変更！ */
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0;
  text-align: left;             /* ← 念のため追加 */
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* brandとnavを左右に配置 */
  flex-wrap: wrap;                 /* 画面幅が狭いときは折り返しOK */
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;     /* ← 左寄せを維持 */
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0;
}

/* ────────────────────────────────
   ヘッダー配置リセット（brand＋navを横並びに）
──────────────────────────────── */
.site-header .wrap {
  display: flex !important;           /* ← 確実にflex化 */
  flex-direction: row !important;     /* ← 横並び */
  align-items: center !important;     /* ← 高さを揃える */
  justify-content: space-between !important; /* 左右に分配 */
  flex-wrap: nowrap !important;       /* ← 折り返し防止（広い画面用） */
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.2rem 0;
}


/* === 興祖微妙大師 六五〇遠諱 hero === */
.hero-onnki {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url('./images/ike.jpg');       /* ← 添付画像のパス */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* テキストブロック（中央配置） */
.hero-onnki .hero-content {
  position: relative;
  z-index: 1;
  padding: 4rem 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* タイトル */
.hero-onnki h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin: 0 0 1rem;
}

/* 説明文 */
.hero-onnki p {
  font-size: 1.1rem;
  line-height: 1.9;
}

/* 暗めのベール（必要なら） */
.hero-onnki .overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* 背景写真を落ち着かせて文字を読みやすく */
  z-index: 0;
}


/* === 興祖微妙大師 六百五十年遠諱 heroタイトル装飾 === */
.hero-onnki h1 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Sawarabi Mincho", serif; /* 明朝系で格式高く */
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  letter-spacing: 0.15em;
  color: #d4af37;                     /* 落ち着いた金色（ゴールド） */
  text-shadow:
    0 0 8px rgba(0,0,0,0.3),
    0 2px 3px rgba(255,255,255,0.2);  /* 立体感と柔らかい光沢 */
  margin: 0 0 1rem;
}

/* タイトル下の説明文（落ち着いた白金調に） */
.hero-onnki p {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.05rem;
  color: #f5f3eb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  line-height: 1.9;
}


/* === 「少水魚有楽」 書風タイトル === */
.calligraphy {
  font-family: "Yu Mincho", "Hannari", "Sawarabi Mincho", "Klee One", serif;
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
  color: #222;                    /* 黒系で落ち着いた筆墨色 */
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

/* 毛筆の流れをより自然にする（やや傾き・筆の滲み感） */
.calligraphy {
  font-style: normal;
  transform: rotate(-1deg);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.15),
    0 0 3px rgba(0,0,0,0.08);
}

/* === 禅語「少水魚有楽」 草書体スタイル === */
.calligraphy {
  font-family: "Yuji Syuku", "Yuji Boku", "Kaisei Decol", "Hannari", "Sawarabi Mincho", serif;
  font-size: clamp(2.6rem, 6vw, 4rem);
  text-align: center;
  color: #2b1a10;                /* 墨のような深い茶黒 */
  line-height: 1.1;
  letter-spacing: 0.05em;
  margin: 1.5rem 0 2rem;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.15),
    0 0 4px rgba(0,0,0,0.1);
  transform: rotate(-1.5deg);
}

/* === 微妙大師 六百五十年遠諱：本文セクション背景 === */
/* === 興祖微妙大師 六五〇年遠諱 本文背景 === */
.onnki-text {
 background:
  linear-gradient(rgba(240, 238, 230, 0.95), rgba(230, 228, 220, 0.97)),
  url('./images/bg-washi-elegant.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;   /* スクロール時に背景を静止させる（荘厳感） */
  border-top: 2px solid #c8b77b;  /* 金箔より抑えたアンティークゴールド */
  border-bottom: 2px solid #c8b77b;
  padding: 3rem 2rem;
  margin-top: 2rem;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.05); /* 内側に微妙な陰影 */
}

/* 本文の文字設定 */
.onnki-text p {
  color: #222;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Sawarabi Mincho", serif;
  line-height: 1.9;
  font-size: 1.05rem;
}


/* === 微妙大師の言葉ブロック（わびさび調） === */
.quote-block {
  background:
    linear-gradient(
      rgba(235, 232, 220, 0.9),
      rgba(230, 225, 215, 0.92)
    ),
    url('./images/bg-washi-elegant.jpg'); /* ← 落ち着いた和紙テクスチャ */
  background-size: cover;
  background-position: center;
  border: 1.5px solid #b8b2a3;             /* 錫色（すずいろ）〜古金属調 */
  border-radius: 6px;
  padding: 2.5rem 3rem;
  margin: 2.5rem auto;
  max-width: 900px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.08),
    0 2px 5px rgba(0, 0, 0, 0.05);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Sawarabi Mincho", serif;
  color: #1f1f1f;
  line-height: 1.9;
  position: relative;
}

/* 紙の端にほんのり焼けた縁をつける */
.quote-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.1) 0%,
    rgba(0,0,0,0.08) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 6px;
}

/* 引用文中のテキスト */
.quote-block p {
  margin: 0;
  font-size: 1.05rem;
  color: #2a2a2a;
}

/* 引用元（右下の落款風） */
.quote-block .credit {
  display: block;
  text-align: right;
  font-size: 0.95rem;
  color: #6c6a62;
  margin-top: 1.8rem;
  letter-spacing: 0.05em;
}

/* === 妙心寺公式サイトリンクボタン === */
.onnki-link {
  display: inline-block;
  background: linear-gradient(180deg, #d8c690 0%, #bfa66b 100%);
  color: #2b1a0f;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #b89b4d;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.15),
    inset 0 1px 1px rgba(255,255,255,0.4);
  transition: all 0.25s ease;

  /* サイズと位置の調整 */
  padding: 0.5rem 1.2rem;
  width: fit-content;
  margin: 3rem auto 0;     /* ← 中央揃え（左右中央） */
  display: block;          /* ブロック化して中央配置 */
  text-align: center;      /* 文字も中央寄せ */
}

.onnki-link:hover {
  background: linear-gradient(180deg, #e5d8a3 0%, #c9b678 100%);
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.2),
    inset 0 1px 1px rgba(255,255,255,0.5);
}

/* === 興祖微妙大師 六五〇年遠諱 本文背景（雲龍図をやや強めに） === */
.onnki-text {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(250, 250, 245, 0.88)),
    url('./images/hatto_MG_2985.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-top: 2px solid #c8b77b;
  border-bottom: 2px solid #c8b77b;
  padding: 3rem 2rem;
  margin-top: 2rem;
  z-index: 0;
  overflow: hidden;
}

/* === 背景ベール（濃度を下げて龍を強調） === */
.onnki-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.01); /* ← 0.6→0.4 に変更：龍がくっきり */
  z-index: 0;
}

/* === テキスト層 === */
.onnki-text > * {
  position: relative;
  z-index: 1;
}

/* === 引用ブロック（半透明を少し強調） === */
.quote-block {
  background: rgba(255, 255, 255, 0.3);  /* ← 背景をやや薄く変更（透け感UP） */
  border: 1.5px solid #b8b2a3;
  border-radius: 6px;
  padding: 2.5rem 3rem;
  margin: 2.5rem auto;
  max-width: 900px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.08),
    0 2px 5px rgba(0, 0, 0, 0.05);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Sawarabi Mincho", serif;
  color: #1f1f1f;
  line-height: 1.9;
  position: relative;
}





/* === 特別展セクション === */
.exhibition {
  background:
    linear-gradient(rgba(250, 248, 240, 0.94), rgba(240, 236, 225, 0.96)),
    url('./images/bg-washi-elegant.jpg');
  background-size: cover;
  background-position: center;
  border-top: 2px solid #c8b77b;
  border-bottom: 2px solid #c8b77b;
  padding: 3rem 2rem;
}

.exhibition-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.exhibition-image {
  flex: 1 1 350px;
  text-align: center;
}

.exhibition-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.exhibition-text {
  flex: 2 1 500px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: #1f1f1f;
  line-height: 1.9;
}

.exhibition-text h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #3c2e1c;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #b7a66f;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.exhibition-info {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  font-size: 1rem;
}

.exhibition-info li {
  margin-bottom: 0.5rem;
}

.exhibition-info strong {
  color: #6b5b36;
}

/* === 展示会リンクボタン（文字幅フィット版） === */
.exhibition-link {
  display: inline-block;
  background: linear-gradient(180deg, #d8c690 0%, #bfa66b 100%);
  color: #2b1a0f;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #b89b4d;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.15),
    inset 0 1px 1px rgba(255,255,255,0.4);
  transition: all 0.25s ease;

  /* ↓ サイズ調整 */
  padding: 0.5rem 1.2rem;   /* 左右の余白を狭めて、文字幅に近づける */
  width: fit-content;       /* ボタン幅を文字サイズに自動フィット */
  margin: 2rem auto 0;      /* 上下余白は中央揃えのまま */
}



.exhibition-link:hover {
  background: linear-gradient(180deg, #e5d8a3 0%, #c9b678 100%);
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.2),
    inset 0 1px 1px rgba(255,255,255,0.5);
}





/* === 妙感寺の興祖微妙大師六五〇年遠諱事業 セクション === */
.onnki-project {
  background:
    linear-gradient(rgba(255, 248, 235, 0.9), rgba(245, 235, 215, 0.95)),
    url('./images/bg-washi-amber-soft.jpg');  /* ← 新しい和紙背景を指定 */
  background-size: cover;
  background-position: center;
  border-top: 2px solid #c8b77b;   /* 控えめな金線 */
  border-bottom: 2px solid #c8b77b;
  padding: 3rem 2rem;
}


.onkiproject-wrap {
  max-width: 1000px;
  margin: 0 auto;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Sawarabi Mincho", serif;
  color: #1f1f1f;
  line-height: 1.9;
}

.onnki-project h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: 0.08em;
  color: #3c2e1c;
  margin: 0 0 1rem;
  border-bottom: 1px solid #b7a66f; /* 細金線で格調を演出 */
  padding-bottom: 0.35rem;
}

.onnki-project p {
  font-size: 1.05rem;
  margin: 1rem 0 0;
}


/* === 妙感寺クラウドファンディング＆お問い合わせリンク === */
.onkiproject-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* 各ボタンのスタイル：既存の金茶トーンと統一 */
.project-link {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: linear-gradient(180deg, #d8c690 0%, #bfa66b 100%);
  color: #2b1a0f;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #b89b4d;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.25s ease;
  width: fit-content;
  text-align: center;
}

.project-link:hover {
  background: linear-gradient(180deg, #e5d8a3 0%, #c9b678 100%);
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}


/* === 共通 === */
.menu-toggle {
  display: none;
  background: linear-gradient(180deg, #d8c690 0%, #bfa66b 100%);
  color: #2b1a0f;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1rem;
  border: 1px solid #b89b4d;
  border-radius: 4px;
  padding: 0.5rem 1.4rem;  /* 少し余裕を持たせる */
  cursor: pointer;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.15),
    inset 0 1px 1px rgba(255,255,255,0.4);
}

/* === スマホサイズで切り替え === */
@media (max-width: 768px) {
  .menu-toggle {
    display: inline-block;
    margin-top: 0.5rem;
  }

  nav.nav {
    display: none; /* 初期は隠す */
    flex-direction: column;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #c8b77b;
    padding: 0.5rem 1rem;
  }

  nav.nav.active {
    display: flex; /* ボタンで展開 */
  }

  .nav ul {
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .nav li {
    list-style: none;
    width: 100%;
    margin: 0.5rem 0;
  }

  .nav a {
    display: block;
    width: 100%;
    padding: 0.6rem;
    text-decoration: none;
    color: #2b1a0f;
    border-bottom: 1px solid #e0d5b8;
  }

  .nav a:hover {
    background-color: #f5f0da;
  }
}


/* === スマホメニュー開閉 === */
.menu-toggle {
  display: none;
  background: linear-gradient(180deg, #d8c690 0%, #bfa66b 100%);
  color: #2b1a0f;
  font-family: "Yu Mincho", serif;
  font-size: 1rem;
  border: 1px solid #b89b4d;
  border-radius: 4px;
  padding: 0.5rem 1.4rem;
  cursor: pointer;
}

/* 小画面時に切り替え */
@media (max-width: 768px) {
  .menu-toggle {
    display: inline-block;
    margin-top: 0.5rem;
  }

  .site-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #c8b77b;
    padding: 0.5rem 1rem;
  }

  .site-nav.active {
    display: flex;
  }

  .site-nav a {
    display: block;
    width: 100%;
    padding: 0.6rem;
    text-decoration: none;
    color: #2b1a0f;
    border-bottom: 1px solid #e0d5b8;
  }

  .site-nav a:hover {
    background-color: #f5f0da;
  }
}

/* === スマホメニュー（共通） === */
.menu-toggle {
  display: none;
  background: linear-gradient(180deg, #d8c690 0%, #bfa66b 100%);
  color: #2b1a0f;
  font-family: "Yu Mincho", serif;
  font-size: 1rem;
  border: 1px solid #b89b4d;
  border-radius: 4px;
  padding: 0.5rem 1.4rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.4);
}

@media (max-width: 768px) {
  .menu-toggle { display: inline-block; margin-top: .5rem; }

  .site-nav {
    display: none;             /* 初期は隠す */
    flex-direction: column;
    align-items: flex-start;
    background: rgba(255,255,255,.95);
    border-top: 1px solid #c8b77b;
    padding: .5rem 1rem;
  }
  .site-nav.active { display: flex; }

  .site-nav a {
    display: block;
    width: 100%;
    padding: .6rem;
    text-decoration: none;
    color: #2b1a0f;
    border-bottom: 1px solid #e0d5b8;
  }
  .site-nav a:hover { background: #f5f0da; }
}


/* === 享保の遠忌と妙感寺由緒 === */
#kyouhou {
  background-color: #f8ecef; /* 柔らかい桜色トーン（既存展示に合わせ） */
  padding: 3rem 2rem;
  border-top: 2px solid #d8c690;
  border-bottom: 2px solid #d8c690;
}

#kyouhou h2 {
  text-align: center;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: #3c2e1c;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.kyouhou-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}

/* 各カード */
.kyouhou-grid figure {
  background: #fffafc;
  border: 1px solid #e3c7c9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* 📌 画像サイズを統一（重要ポイント） */
.kyouhou-grid img {
  width: 100%;
  height: 320px; /* ← 統一した高さ（お好みで調整可） */
  object-fit: cover; /* 枠内にきれいに収まるようにトリミング */
  display: block;
}

/* キャプション */
.kyouhou-grid figcaption {
  text-align: center;
  font-size: 0.95rem;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  padding: 0.5rem 0.8rem;
  color: #3b2f1d;
  background: linear-gradient(180deg, #fff7f9, #fbecef);
  border-top: 1px solid #e3c7c9;
  flex-grow: 1;
}

/* hover効果 */
.kyouhou-grid figure:hover {
  transform: scale(1.02);
}


/* --- toujyou と gyoujyouki の間の境界線 --- */
#kyouhou .toujyou {
  padding-bottom: 2rem;
  border-bottom: 2px solid #d8c690; /* やや金茶色のライン（既存トーンと統一） */
  margin-bottom: 2.5rem;
}


/* 行状記の奥書スタイル */
.okugaki {
  text-align: right;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.05rem;
  color: #3c2e1c;
  margin-top: 1.5rem;
  margin-right: 1rem;
  letter-spacing: 0.05em;
}


/* 佐々木承周老師の歩みと正受庵：このセクションでは .wrap の左右余白を消す */
.sasakisyoujyuan .wrap {
  width: 100%;
  margin: 0;            /* 中央寄せをやめる */
  padding: 0 30px;      /* PC時：左右30px（セクションの指定と整合） */
}

/* モバイル：さらに左右を揃えて軽くする */
@media (max-width: 800px) {
  .sasakisyoujyuan { padding: 20px 16px; }      /* セクション本体も左右16px */
  .sasakisyoujyuan .wrap {
    width: 100%;
    margin: 0;
    padding: 0;                                   /* 内側は0、外側で16pxを付与 */
  }
}

/* === 佐々木承周老師の歩みと正受庵（モバイル修正） === */
@media (max-width: 800px) {
  .sasakisyoujyuan .wrap {
    width: 100%;
    margin: 0;
    padding: 0 16px;  /* ← 左右のバランスを取る */
  }
}

/* === 佐々木承周老師の歩みと正受庵：モバイルの右余白対策 === */
@media (max-width: 800px) {
  /* セクション本体は左右も同じだけ詰める */
  .sasakisyoujyuan {
    padding: 16px; /* 上下左右すべて16pxに統一（好みでOK） */
  }

  /* このセクション内だけ .wrap の中央寄せ＆96%幅を無効化して全幅に */
  .sasakisyoujyuan .wrap {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* 写真ブロックが固定幅や中央寄せになっていた場合の保険（右の空きを消す） */
  .sasakisyoujyuan .sasaki-shoujyoan-photo figure {
    width: 100%;
    margin: 16px 0;       /* 左右のauto余白を撤去して全幅化 */
    padding: 0;
  }
  .sasakisyoujyuan .sasaki-shoujyoan-photo img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* 佐々木承周老師の歩みと正受庵：内側コンテナの余白を統一 */
.sasakisyoujyuan { padding: 0; }             /* セクション側は0に */
.sasakisyoujyuan .wrap { padding: 20px 16px; }/* 内側で上下左右の余白を付与 */

@media (min-width: 801px) {
  .sasakisyoujyuan .wrap { padding: 30px; }  /* PC時は他と同程度に */
}
/* 佐々木承周老師の歩みと正受庵：スマホでフルブリードにして左右の空きを相殺 */
@media (max-width: 800px) {
  .sasakisyoujyuan {
    /* 親 .wrap の左右2%（＝100vw-100% の半分）を打ち消す */
    margin-inline: calc((100vw - 100%) / -2);
    padding-inline: 16px;   /* 読みやすい内側余白は維持 */
  }
}
/* --- fix: main.wrap 内の二重 wrap を正規化して左右均等にする --- */
.content.wrap .wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 念のため：対象セクションのスマホ余白は左右対称で揃える */
@media (max-width: 800px){
  .sasakisyoujyuan { padding-left: 16px; padding-right: 16px; }
}

/* --- グローバル横スクロール防止 --- */
html, body {
  overflow-x: hidden;
}

/* --- 画像のはみ出し防止 --- */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- flex や float 併用時に余白が残るケースを吸収 --- */
section, .wrap, .content {
  box-sizing: border-box;
  overflow-x: hidden;
}

/* --- モバイル時の2カラム→1カラム切り替え強制 --- */
@media (max-width: 800px) {
  .haijyu, .syukuji, .sasakisyoujyuan, .reien, .etansenge, .hukkou, .oumisaigokunoukyou, .shakyou, .korekara {
    display: block !important;
  }
  .haijyu img, .syukuji img, .sasakisyoujyuan img, .reien img, .etansenge img, .hukkou img, .oumisaigokunoukyou img, .shakyou img, .korekara img {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto;
  }
}