/* -------------------------------------------------------------
  曹洞宗 慈眼山 観音寺 - Web Design System & Layout Stylesheet
------------------------------------------------------------- */

/* 変数定義 */
:root {
  --bg-sidebar: #120b08;      /* 深い漆黒・こげ茶（サイドバー） */
  --bg-main: #f7f5f0;         /* 柔らかな生成り色（メイン背景） */
  --bg-card: #ffffff;         /* カード・ボックス背景 */
  --gold: #c5a059;            /* 上品なゴールド */
  --gold-light: #ebdcb9;      /* 明るいゴールド */
  --gold-dark: #9d7631;       /* 深みのあるゴールド */
  --text-main: #2d221d;       /* 墨色・ダークブラウン（本文） */
  --text-muted: #66554e;      /* ややくすんだブラウン（補助文） */
  --text-white: #ffffff;      /* 白色 */
  --font-serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  --sidebar-width: 280px;     /* サイドバーの横幅 */
  --transition-speed: 0.4s;   /* アニメーション速度 */
}

/* リセット CSS & 基本設定 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--text-main);
  background-color: var(--bg-main);
  line-height: 1.8;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* -------------------------------------------------------------
  レイアウト構成（PC基準）
------------------------------------------------------------- */
.site-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  background-color: var(--bg-main);
  position: relative;
}

/* -------------------------------------------------------------
  サイドバー（デスクトップ時）
------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--bg-sidebar);
  background-image: url('../images/bg_header2.jpg');
  background-repeat: repeat;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  border-right: 1px solid rgba(197, 160, 89, 0.2);
  display: flex;
  flex-direction: column;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ロゴ */
.logo-container {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.logo-sub-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  width: 100%;
}

.logo-sub-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.logo-sub-row.font-small {
  font-size: 11px;
  letter-spacing: 0.05em;
}

.sidebar-mini-logo {
  height: 16px;
  width: auto;
  flex-shrink: 0;
  vertical-align: middle;
}

.sidebar-mini-logo.small-flower {
  height: 13px;
}

.sub-sect {
  margin: 0;
}

.sub-mountain {
  margin: 0;
}

.main-logo {
  max-width: 180px;
  margin: 0 auto;
}

/* メニューリスト */
.sidebar-nav {
  margin-bottom: auto;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d8cbb5;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  font-size: 10px;
  font-family: var(--font-sans);
  color: var(--gold);
  font-weight: 700;
  transition: all 0.3s ease;
}

/* メニューのホバーエフェクト */
.nav-item:hover {
  color: var(--text-white);
  background-color: rgba(197, 160, 89, 0.12);
  border-color: rgba(197, 160, 89, 0.3);
  padding-left: 18px;
}

.nav-item:hover .nav-num {
  background-color: var(--gold);
  color: var(--bg-sidebar);
}

/* サイドバー問い合わせ */
.sidebar-contact {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px dashed rgba(197, 160, 89, 0.3);
  text-align: center;
}

.contact-label {
  font-size: 11px;
  color: var(--gold-light);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  font-family: var(--font-serif);
}

.phone-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 15px;
  letter-spacing: 0.05em;
}

.phone-number:hover {
  color: var(--gold);
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background-color: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 11px;
  font-family: var(--font-serif);
  letter-spacing: 0.05em;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.contact-btn:hover {
  background-color: var(--gold);
  color: var(--bg-sidebar);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
}

/* モバイルヘッダー（デフォルト非表示） */
.mobile-header {
  display: none;
}

/* -------------------------------------------------------------
  ヒーロービジュアル（カルーセルスライダー）
------------------------------------------------------------- */
.hero-section {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 550px;
  overflow: hidden;
  background-color: #000;
}

/* スライド */
.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slide-img-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 7s linear;
}

.slide.active .slide-img {
  transform: scale(1);
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(18, 11, 8, 0.45), rgba(0, 0, 0, 0.1) 60%, rgba(18, 11, 8, 0.45));
  z-index: 3;
}

/* 縦書きのキャッチコピー */
.hero-content {
  position: absolute;
  top: 10%;
  left: 8%;
  z-index: 5;
  color: var(--text-white);
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  
  /* 縦書きモードを親コンテナ全体に指定 */
  writing-mode: vertical-rl;
  
  /* 高さを明示して、ブラウザに改行位置を認識させる */
  height: 55vh; 
  max-height: 500px; /* 420pxから500pxへ引き上げ */
}

.vertical-text {
  writing-mode: vertical-rl;
  display: inline-block;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.35em;
  line-height: 1.4;
  margin-bottom: 0;
  margin-left: 25px; /* タイトルとサブタイトルの間隔 */
  height: 100%;
}

.hero-title span {
  display: block; /* 縦書きにおける「行」として左へ改行させる */
  white-space: nowrap; /* 「寺。」だけの意図しない改行を防止 */
}

.hero-title .line-1 {
  margin-left: 12px; /* タイトルの1行目と2行目の間隔 */
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.25em;
  line-height: 1.8;
  color: #ebdcb9;
  border-right: 1px solid rgba(197, 160, 89, 0.3); /* 右側に枠線を引く */
  padding-right: 15px;
  height: 100%;
}

/* スライダー矢印 */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(18, 11, 8, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.slider-arrow:hover {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--bg-sidebar);
}

.slider-arrow.prev { left: 30px; }
.slider-arrow.next { right: 30px; }

/* スライダーインジケーター（ドット） */
.slider-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.slider-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dots .dot.active {
  background-color: var(--gold);
  transform: scale(1.2);
}

/* サムネイルナビゲーション (右下) */
.slider-thumbnails {
  position: absolute;
  bottom: 30px;
  right: 50px;
  display: flex;
  gap: 12px;
  z-index: 10;
}

.thumb-item {
  width: 80px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-item:hover, .thumb-item.active {
  opacity: 1;
  border-color: var(--gold);
}

/* -------------------------------------------------------------
  セクション共通ルール
------------------------------------------------------------- */
.section {
  padding: 80px 60px;
  position: relative;
  overflow: hidden;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title-japanese {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-main);
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.section-decor-flower {
  font-size: 0;
  color: transparent;
  margin-top: 5px;
  opacity: 0.8;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 14px;
  height: 14px;
  background-image: url('../images/decor_flower.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* -------------------------------------------------------------
  はじめての方へ セクション
------------------------------------------------------------- */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-card {
  background-color: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(197, 160, 89, 0.15);
  box-shadow: 0 4px 20px rgba(45, 34, 29, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-img-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-main);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.card-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}

.card-link-arrow {
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-size: 18px;
  color: var(--gold);
  transition: transform 0.3s ease;
}

/* ホバー時の挙動 */
.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(197, 160, 89, 0.15);
}

.feature-card:hover .card-img {
  transform: scale(1.08);
}

.feature-card:hover .card-title {
  color: var(--gold-dark);
}

.feature-card:hover .card-link-arrow {
  transform: translateX(5px);
}

/* -------------------------------------------------------------
  観音寺について セクション (背景付き)
------------------------------------------------------------- */
.section-about {
  color: var(--text-white);
  padding: 100px 60px;
}

.about-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.22) blur(2px);
  z-index: 1;
}

.about-container {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.about-section-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--gold-light);
  margin-bottom: 10px;
  text-align: left;
}

.about-subtitle {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.15em;
  color: #dfd7c5;
  margin-bottom: 30px;
}

.about-text-block {
  font-size: 15px;
  line-height: 2;
  color: #f1ebd9;
  margin-bottom: 40px;
}

.about-text-block p {
  margin-bottom: 15px;
}

/* 住職挨拶カード */
.priest-card {
  display: flex;
  background-color: rgba(28, 21, 18, 0.8);
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 6px;
  overflow: hidden;
  max-width: 650px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.priest-img-wrapper {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}

.priest-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.priest-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.priest-role {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 8px;
}

.priest-desc {
  font-size: 13px;
  color: #e5ded0;
  margin-bottom: 15px;
  line-height: 1.6;
}

.priest-btn {
  align-self: flex-start;
  font-size: 12px;
  font-family: var(--font-serif);
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

.priest-btn:hover {
  color: var(--text-white);
  border-color: var(--text-white);
}

/* -------------------------------------------------------------
  永代供養・ご相談 セクション (バナー風)
------------------------------------------------------------- */
.section-eitaikuyou-banner {
  padding: 60px 40px;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(197, 160, 89, 0.2);
  border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}

.banner-inner {
  max-width: 1000px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.banner-text-side {
  max-width: 600px;
}

.banner-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
  letter-spacing: 0.15em;
}

.banner-desc {
  font-size: 14px;
  color: var(--text-muted);
}

.banner-action-side {
  display: flex;
  gap: 15px;
  flex-shrink: 0;
}

.btn-gold-fill, .btn-white-outline, .btn-dark-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 13px;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-gold-fill {
  background-color: var(--gold);
  color: var(--bg-sidebar);
  border: 1px solid var(--gold);
}

.btn-gold-fill:hover {
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--text-white);
  box-shadow: 0 4px 15px rgba(157, 118, 49, 0.3);
}

.btn-white-outline {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid rgba(45, 34, 29, 0.2);
}

.btn-white-outline:hover {
  background-color: var(--text-main);
  color: var(--text-white);
  border-color: var(--text-main);
}

/* -------------------------------------------------------------
  平将門と日秀の伝承 セクション (ダーク背景)
------------------------------------------------------------- */
.section-masakado-banner {
  color: var(--text-white);
  padding: 80px 60px;
  background-size: cover;
  background-position: center 15%;
}

.masakado-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}

.masakado-visual {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(197, 160, 89, 0.4);
  flex-shrink: 0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.masakado-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.masakado-content {
  flex: 1;
}

.masakado-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 20px;
  letter-spacing: 0.2em;
}

.masakado-text {
  font-size: 14px;
  line-height: 1.8;
  color: #dfd7c5;
  margin-bottom: 25px;
}

.btn-dark-outline {
  background-color: transparent;
  color: var(--gold-light);
  border: 1px solid var(--gold);
}

.btn-dark-outline:hover {
  background-color: var(--gold);
  color: var(--bg-sidebar);
}

/* -------------------------------------------------------------
  2カラムセクション：境内のご案内 ＆ 近limb史跡めぐり
------------------------------------------------------------- */
.columns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.column-box {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 4px 25px rgba(45, 34, 29, 0.03);
}

.column-header-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1.5px solid var(--gold-light);
  padding-bottom: 10px;
}

.column-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.1em;
}

.column-more-link {
  font-size: 12px;
  color: var(--gold-dark);
  font-family: var(--font-serif);
}

.column-more-link:hover {
  color: var(--text-main);
}

.column-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 25px;
}

/* サムネイル4枚グリッド */
.thumb-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.grid-item {
  text-align: center;
  cursor: default; /* Changed from pointer to default cursor */
}

.grid-img-wrap {
  width: 100%;
  height: 70px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
}

.grid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.grid-caption {
  font-size: 10.5px;
  font-family: var(--font-serif);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ホバー時の挙動 */
.grid-item:hover .grid-img-wrap img {
  /* Zoom effect disabled as requested */
}

.grid-item:hover .grid-caption {
  /* Text highlight effect disabled to prevent false click signifier */
}

/* -------------------------------------------------------------
  観音寺だより・お知らせ セクション
------------------------------------------------------------- */
.news-container {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid var(--gold-light);
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.news-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
}

.news-archive-link {
  font-size: 12px;
  color: var(--gold-dark);
  font-family: var(--font-serif);
}

.news-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-item {
  display: flex;
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.1);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.news-item:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 15px rgba(197, 160, 89, 0.1);
  transform: translateY(-2px);
}

.news-img-wrap {
  width: 130px;
  height: 100px;
  flex-shrink: 0;
  overflow: hidden;
}

.news-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-item:hover .news-img-wrap img {
  transform: scale(1.08);
}

.news-content-body {
  padding: 16px 20px;
  flex: 1;
  min-width: 0;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.news-date {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.news-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 600;
}

.tag-info {
  background-color: #f0f0ee;
  color: #555550;
  border: 1px solid #dcdcd8;
}

.tag-event {
  background-color: #ebdcb9;
  color: var(--gold-dark);
  border: 1px solid rgba(197, 160, 89, 0.3);
}

.news-item-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.news-item-excerpt {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 観音寺報PDFダウンロードカード (右側) */
.pdf-card-side {
  display: flex;
  flex-direction: column;
}

.pdf-card {
  background-color: var(--bg-card);
  border: 1.5px solid var(--gold-light);
  border-radius: 8px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(45, 34, 29, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pdf-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.2);
  padding-bottom: 10px;
}

.pdf-cover-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}

/* 擬似PDFカバーデザイン */
.pdf-mock-cover {
  width: 140px;
  height: 190px;
  background-color: #faf9f6;
  border: 1px solid #d4cbb8;
  border-radius: 3px;
  box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.1);
  padding: 10px;
  position: relative;
  transition: transform 0.3s ease;
}

.pdf-mock-cover:hover {
  transform: scale(1.05) rotate(1deg);
}

.pdf-mock-inner {
  border: 1px solid #ebdcb9;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.pdf-mock-label {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-main);
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

.pdf-mock-vol {
  font-size: 10px;
  font-weight: 600;
  color: var(--gold-dark);
  margin-top: 8px;
}

.pdf-mock-line {
  width: 30px;
  height: 1.5px;
  background-color: var(--gold);
  margin: 10px 0;
}

.pdf-mock-date {
  font-size: 8px;
  color: var(--text-muted);
}

.pdf-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  background-color: #a42c23; /* 高級感あるエンジ・朱色 */
  color: var(--text-white);
  border: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.pdf-download-btn:hover {
  background-color: #832019;
  box-shadow: 0 4px 12px rgba(164, 44, 35, 0.3);
}

/* -------------------------------------------------------------
  よくある質問 ＆ 交通アクセス (アコーディオンとマップ)
------------------------------------------------------------- */
.faq-column {
  flex: 1.2;
}

.access-column {
  flex: 1;
}

/* アコーディオン */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion-item {
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 6px;
  background-color: var(--bg-card);
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: rgba(197, 160, 89, 0.05);
}

.accordion-icon {
  font-size: 18px;
  color: var(--gold);
  font-weight: 400;
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.accordion-content-inner {
  padding: 0 24px 20px 24px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  border-top: 1px solid rgba(197, 160, 89, 0.08);
  padding-top: 15px;
}

/* 開閉時のアニメーション */
.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
}

/* マップのプレースホルダー表示 */
.access-map-wrapper {
  width: 100%;
  height: 200px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(197, 160, 89, 0.25);
  margin-bottom: 20px;
}

/* CSSのみで構築するお寺の簡易グラフィカルマップ */
.access-map-mock {
  width: 100%;
  height: 100%;
  background-color: #e5dfd3;
  position: relative;
  font-family: var(--font-serif);
  font-weight: 700;
}

/* マップ描画のための装飾 */
.map-lake {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 140px;
  height: 60px;
  background-color: #b1ccd3;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #3f606a;
}

.map-station {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 6px 12px;
  background-color: #4c3e39;
  color: var(--text-white);
  border-radius: 4px;
  font-size: 11px;
}

.map-road-rt6 {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 100%;
  height: 16px;
  background-color: #cbd4c3;
  transform: rotate(-5deg);
  display: flex;
  align-items: center;
  padding-left: 50px;
  font-size: 9px;
  color: #6c7863;
}

.map-pin {
  position: absolute;
  top: 75px;
  left: 140px;
  padding: 8px 16px;
  background-color: #fff;
  border: 2px solid var(--gold-dark);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-main);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  animation: pulse-pin 2s infinite;
}

@keyframes pulse-pin {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.access-info {
  margin-top: 15px;
}

.access-temple-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.access-address {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.btn-access-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: transparent;
  border: 1px solid var(--text-main);
  font-size: 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  border-radius: 4px;
}

.btn-access-link:hover {
  background-color: var(--text-main);
  color: var(--text-white);
}

/* -------------------------------------------------------------
  フッター (お問い合わせ・クレジット)
------------------------------------------------------------- */
.footer {
  background-color: #1a1512;
  color: var(--text-white);
  border-top: 1px solid rgba(197, 160, 89, 0.2);
}

.footer-contact-area {
  padding: 80px 40px;
  text-align: center;
  background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 15px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-contact-desc {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 15px;
}

.footer-contact-tel-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}

.footer-tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 38px;
  font-weight: 700;
  color: var(--text-white);
  font-family: var(--font-sans);
}

.footer-tel:hover {
  color: var(--gold-light);
}

.footer-time {
  font-size: 12px;
  color: #9c8e87;
}

.footer-text-note {
  font-family: var(--font-serif);
  font-size: 14px;
  color: #dfd7c5;
  margin-bottom: 30px;
}

.footer-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 40px;
  background-color: var(--gold);
  color: var(--bg-sidebar);
  border: none;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(197, 160, 89, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.footer-form-btn:hover {
  background-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(197, 160, 89, 0.3);
}

.footer-bottom {
  padding: 30px 40px;
  text-align: center;
}

.copyright {
  font-size: 11px;
  color: #7a6e67;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------------
  レスポンシブ対応 (1023px以下 - モバイル/タブレット)
------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  
  /* レイアウトの再構築 */
  .site-container {
    flex-direction: column;
  }

  .main-content {
    margin-left: 0;
    width: 100%;
    padding-top: 60px; /* モバイルヘッダー分の余白 */
  }

  /* モバイルヘッダー */
  .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--bg-sidebar);
    border-bottom: 1.5px solid var(--gold);
    padding: 0 20px;
    z-index: 200;
  }

  .mobile-logo-area {
    height: 40px;
  }

  .mobile-logo-img {
    height: 100%;
    width: auto;
  }

  /* ハンバーガーメニュー */
  .menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .menu-trigger span {
    display: block;
    width: 100%;
    height: 2.5px;
    background-color: var(--gold);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* メニュー展開時のアニメーション */
  .menu-trigger.active span:nth-of-type(1) {
    transform: translateY(10.5px) rotate(45deg);
  }

  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
  }

  .menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-10.5px) rotate(-45deg);
  }

  /* ドロワー化するサイドバー */
  .sidebar {
    width: 100%;
    height: calc(100vh - 60px);
    top: 60px;
    left: -100%; /* 初期は左に隠す */
    border-right: none;
    border-top: 1px solid rgba(197, 160, 89, 0.2);
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .sidebar.active {
    left: 0;
  }

  .sidebar-inner {
    padding: 30px 20px;
  }

  /* モバイル時のロゴコンテナは不要（ヘッダーにあるため） */
  .logo-container {
    display: none;
  }

  /* スライダーの調整 */
  .hero-section {
    height: 60vh;
    min-height: 400px;
  }

  .hero-content {
    left: 5%;
    top: 8%;
    height: 45vh;
    max-height: 290px;
  }

  .hero-title {
    font-size: 23px;
    margin-left: 18px;
  }

  .hero-subtitle {
    font-size: 11px;
    padding-right: 8px;
    border-right: 1px solid rgba(197, 160, 89, 0.3);
  }

  .slider-thumbnails {
    display: none; /* モバイルではサムネイル非表示 */
  }

  /* 各セクション */
  .section {
    padding: 60px 20px;
  }

  /* グリッドを1カラム化 */
  .card-grid-3 {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .columns-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .news-container {
    grid-template-columns: 1fr;
    gap: 35px;
    width: 100%;
    max-width: 100%;
  }

  .news-list-side {
    width: 100%;
  }

  .news-items .news-item {
    flex-direction: column;
  }

  .news-items .news-item .news-img-wrap {
    width: 100%;
    height: 160px;
  }

  .news-items .news-item-excerpt {
    white-space: normal;
  }

  .pdf-card-side {
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }

  /* 観音寺について セクション */
  .section-about {
    padding: 60px 20px;
  }

  .priest-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  .priest-img-wrapper {
    width: 100%;
    height: 240px;
  }

  .priest-btn {
    align-self: center;
  }

  /* 永代供養バナー */
  .section-eitaikuyou-banner {
    padding: 50px 20px;
  }

  .banner-inner {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .banner-action-side {
    flex-direction: column;
    width: 100%;
  }

  .btn-gold-fill, .btn-white-outline {
    justify-content: center;
    width: 100%;
  }

  /* 平将門バナー */
  .section-masakado-banner {
    padding: 60px 20px;
  }

  .masakado-inner {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .masakado-visual {
    width: 180px;
    height: 180px;
  }

  .btn-dark-outline {
    justify-content: center;
    width: 100%;
  }

  /* 境内・史跡サムネイルグリッド */
  .thumb-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .grid-img-wrap {
    height: 100px;
  }

  /* お問い合わせ・フッター */
  .footer-contact-area {
    padding: 60px 20px;
  }

  .footer-tel {
    font-size: 28px;
  }

  .footer-form-btn {
    width: 100%;
  }
}

/* -------------------------------------------------------------
  その他の調整 (480px以下 - スマートフォン)
------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .hero-content {
    height: 42vh;
    max-height: 250px;
  }

  .hero-title {
    font-size: 18px;
    margin-left: 12px;
  }

  .hero-subtitle {
    font-size: 9.5px;
    padding-right: 5px;
    border-right: 1px solid rgba(197, 160, 89, 0.2);
  }

  .section-title-japanese {
    font-size: 24px;
  }

  .news-img-wrap {
    height: 140px;
  }
}

/* =============================================================
  下層ページ用（永代供養・ご相談）追加スタイル
============================================================= */

/* 1. 下層ページ用メインビジュアル */
.sub-hero {
  position: relative;
  height: 380px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60px;
  color: var(--text-white);
}

.sub-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(18, 11, 8, 0.75); /* 深い黒の半透明オーバーレイ */
  z-index: 1;
}

.sub-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.sub-hero-tag {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 4px 12px;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

.sub-hero-title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--text-white);
}

.sub-hero-lead {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}

/* パンくずリスト */
.breadcrumb-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 60px;
  z-index: 2;
  background-color: rgba(18, 11, 8, 0.4);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb a {
  color: var(--gold-light);
  transition: color 0.3s;
}

.breadcrumb a:hover {
  color: var(--gold);
}

.breadcrumb li + li::before {
  content: ">";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.4);
}

/* 2. はじめに：このようなお悩みはありませんか？ */
.worries-container {
  max-width: 960px;
  margin: 0 auto;
}

.worries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.worry-card {
  background-color: var(--bg-card);
  border-left: 4px solid var(--gold);
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.worry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(197, 160, 89, 0.1);
}

.worry-check {
  color: var(--gold);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.worry-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.6;
}

/* 3. 永代供養墓「慈光」について */
.about-flex {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
}

.about-flex.reverse {
  flex-direction: row-reverse;
}

.about-image {
  flex: 1.2;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.about-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.about-image:hover .about-img {
  transform: scale(1.03);
}

.about-desc {
  flex: 1;
}

.desc-p {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.9;
}

.about-btn-area {
  margin-top: 32px;
}

/* 4. 永代供養の対象となる方 */
.bg-light-brown {
  background-color: #f1ede4;
}

.target-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  padding: 30px 24px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.target-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(197, 160, 89, 0.12);
}

.target-icon {
  color: var(--gold);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(197, 160, 89, 0.08);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.target-card:hover .target-icon {
  background-color: var(--gold);
  color: var(--text-white);
}

.target-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
}

/* 5. 納骨・安置期間について */
.period-intro {
  text-align: center;
  margin-bottom: 40px;
  font-size: 15px;
}

.period-notice-box {
  max-width: 800px;
  margin: 0 auto 28px;
  padding: 28px 32px;
  background-color: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(197, 160, 89, 0.08);
}

.period-notice-text {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--text-main);
  margin: 0;
  text-align: left;
}

@media (max-width: 768px) {
  .period-notice-box {
    padding: 22px 18px;
    margin-bottom: 20px;
  }
  .period-notice-text {
    font-size: 14.5px;
    line-height: 1.8;
  }
}

.table-responsive {
  max-width: 800px;
  margin: 0 auto 30px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}

.period-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-card);
}

.period-table th {
  background-color: var(--gold-dark);
  color: var(--text-white);
  font-family: var(--font-serif);
  font-weight: 600;
  padding: 16px 24px;
  text-align: left;
  font-size: 16px;
  border: 1px solid var(--gold-dark);
}

.period-table td {
  padding: 16px 24px;
  border: 1px solid rgba(197, 160, 89, 0.15);
  font-size: 15px;
  color: var(--text-main);
  line-height: 1.6;
}

.period-table tr:nth-of-type(even) {
  background-color: rgba(247, 245, 240, 0.5);
}

.td-period {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--gold-dark) !important;
  width: 25%;
}

.period-notes {
  max-width: 800px;
  margin: 24px auto 0;
  background-color: rgba(197, 160, 89, 0.05);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
  border-radius: 0 4px 4px 0;
}

.note-item {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.8;
}

/* 6. 生前予約について */
.eidaikuyou-pre-booking {
  padding: 60px 40px;
  text-align: center;
  border-radius: 8px;
  max-width: 1000px;
  margin: 0 auto;
}

.pre-booking-inner {
  max-width: 800px;
  margin: 0 auto;
}

.pre-booking-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold-dark);
  margin-bottom: 20px;
}

.pre-booking-desc {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 32px;
  color: var(--text-main);
}

.pre-booking-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn-white-fill {
  background-color: var(--bg-card);
  color: var(--gold-dark);
  border: 1px solid var(--bg-card);
  padding: 12px 32px;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.btn-white-fill:hover {
  background-color: var(--gold-dark);
  color: var(--text-white);
  border-color: var(--gold-dark);
}

.btn-gold-outline {
  background-color: transparent;
  color: var(--gold-dark);
  border: 1px solid var(--gold);
  padding: 12px 32px;
  border-radius: 4px;
  font-weight: 600;
}

.btn-gold-outline:hover {
  background-color: var(--gold);
  color: var(--text-white);
}

/* 7. ご供養について */
.memorial-section-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 15px;
}

.memorial-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: var(--gold);
}

/* 8. ご相談から納骨までの流れ */
.flow-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
}

.flow-step-item {
  flex: 1;
  position: relative;
  text-align: center;
}

.step-num-circle {
  background-color: var(--text-main);
  color: var(--text-white);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin: 0 auto -14px;
  position: relative;
  z-index: 5;
}

.step-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  padding: 35px 15px 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  height: 100%;
  transition: border-color 0.3s;
}

.flow-step-item:hover .step-card {
  border-color: var(--gold);
}

.step-icon {
  color: var(--gold);
  margin-bottom: 12px;
}

.step-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-main);
}

.step-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.flow-arrow {
  color: var(--gold);
  padding: 0 8px;
  flex-shrink: 0;
}

/* 9. よくある質問 (左右分割) */
.faq-flex {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}

.faq-accordion-side {
  flex: 1.4;
}

.faq-image-side {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.faq-side-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

/* 10. お問い合わせCTA (背景模様) */
.eidaikuyou-cta {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-white);
  text-align: center;
  padding: 80px 40px;
  margin: 40px 0;
}

.cta-inner {
  max-width: 800px;
  margin: 0 auto;
}

.cta-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 0.05em;
}

.cta-desc {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 36px;
  color: rgba(255, 255, 255, 0.85);
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.btn-tel-fill {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--bg-card);
  padding: 14px 36px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-tel-fill:hover {
  background-color: var(--gold);
  color: var(--text-white);
  border-color: var(--gold);
}

/* 11. 関連リンクのスタイル調整 */
.eidaikuyou-links .feature-card {
  background-color: var(--bg-card);
}


/* =============================================================
  下層ページ用（永代供養・ご相談）レスポンシブメディアクエリ
============================================================= */

/* 1024px以下 */
@media screen and (max-width: 1023px) {
  .sub-hero {
    height: 320px;
    padding: 0 30px;
  }

  .sub-hero-title {
    font-size: 28px;
  }

  .breadcrumb-container {
    padding: 12px 30px;
  }

  .about-flex {
    flex-direction: column;
    gap: 30px;
  }

  .about-flex.reverse {
    flex-direction: column;
  }

  .about-img {
    height: 300px;
  }

  .flow-steps {
    flex-direction: column;
    gap: 20px;
  }

  .flow-step-item {
    width: 100%;
    max-width: 500px;
  }

  .step-card {
    padding: 30px 24px 20px;
  }

  .flow-arrow {
    transform: rotate(90deg);
    padding: 8px 0;
  }

  .faq-flex {
    flex-direction: column;
    gap: 40px;
  }

  .faq-image-side {
    width: 100%;
  }

  .faq-side-img {
    height: 320px;
  }
}

/* 768px以下 */
@media screen and (max-width: 767px) {
  .sub-hero {
    height: 280px;
    padding: 0 20px;
  }

  .sub-hero-title {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .sub-hero-lead {
    font-size: 13.5px;
  }

  .breadcrumb-container {
    padding: 10px 20px;
  }

  .worries-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .worry-card {
    padding: 20px;
  }

  .pre-booking-actions {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .btn-white-fill, .btn-gold-outline {
    width: 100%;
    max-width: 320px;
  }

  .cta-actions {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .btn-tel-fill {
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .sub-hero {
    height: 240px;
  }

  .sub-hero-tag {
    font-size: 12px;
    padding: 2px 8px;
    margin-bottom: 12px;
  }

  .sub-hero-title {
    font-size: 20px;
  }

  .sub-hero-lead {
    display: none; /* スマホ極小サイズではリード文を非表示にしすっきり見せる */
  }

  .pre-booking-title {
    font-size: 22px;
  }

  .cta-title {
    font-size: 22px;
  }

  .cta-desc {
    font-size: 13.5px;
  }
}

/* =============================================================
  下層ページ用（境内のご案内）追加スタイル
============================================================= */

/* 2. 境内マップ・見どころ一覧 */
.temple-highlights {
  padding-bottom: 20px;
}

.highlights-grid-container {
  max-width: 1100px;
  margin: 0 auto;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.highlight-thumb-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.highlight-thumb-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 25px rgba(197, 160, 89, 0.15);
}

.highlight-thumb-card .thumb-img-wrap {
  height: 110px;
  overflow: hidden;
}

.highlight-thumb-card .thumb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.highlight-thumb-card:hover .thumb-img-wrap img {
  transform: scale(1.05);
}

.thumb-card-body {
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-card);
  flex-grow: 1;
}

.thumb-title {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

.thumb-arrow {
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
}

/* 3〜8, 10〜11. 各見どころの2カラム配置 */
.temple-double-column {
  padding: 80px 40px;
}

.double-column-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.temple-detail-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.3s;
}

.temple-detail-card:hover {
  border-color: rgba(197, 160, 89, 0.35);
}

.temple-detail-card .card-image-wrap {
  height: 280px;
  overflow: hidden;
}

.temple-detail-card .card-detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.temple-detail-card:hover .card-detail-img {
  transform: scale(1.02);
}

.card-detail-content {
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-detail-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
  letter-spacing: 0.05em;
}

.card-detail-subtitle {
  font-size: 14px;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.card-detail-text {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-main);
  margin-bottom: 0;
}

/* 観音堂の特別装飾（金枠） */
.highlight-gold-border {
  border: 2px solid var(--gold);
  position: relative;
  background-image: radial-gradient(rgba(197, 160, 89, 0.02) 1px, transparent 1px);
  background-size: 15px 15px;
}

.title-with-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.title-with-badge .card-detail-title {
  margin-bottom: 0;
}

.gold-badge {
  background-color: var(--gold);
  color: var(--text-white);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.card-link-area {
  margin-top: auto;
  padding-top: 24px;
}

.btn-gold-inline {
  display: inline-block;
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: all 0.3s;
}

.btn-gold-inline:hover {
  color: var(--gold);
  border-color: transparent;
}

/* 境内の古木のコラム風アプローチ */
.column-essay-box {
  background-color: rgba(197, 160, 89, 0.04);
  border-left: 2px solid var(--gold);
  padding: 16px 20px;
  margin-bottom: 20px;
  border-radius: 0 4px 4px 0;
}

.essay-p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.essay-p:last-of-type {
  margin-bottom: 0;
}

.alert-box-mini {
  background-color: rgba(220, 53, 69, 0.03);
  border: 1px solid rgba(220, 53, 69, 0.1);
  padding: 12px 16px;
  border-radius: 4px;
}

.alert-text {
  font-size: 12.5px;
  color: #c92a2a;
  line-height: 1.6;
}

/* 9. 境内の石塔群 */
.stone-towers-container {
  max-width: 1100px;
  margin: 0 auto;
}

.stone-towers-flex {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.stone-towers-main-info {
  flex: 1.3;
}

.stone-towers-lead {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.stone-towers-img-wrap {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.stone-towers-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* 13. 共通お問い合わせCTA (境内ページ用) */
.temple-cta {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-white);
  text-align: center;
  padding: 80px 40px;
  margin: 40px 0;
}


/* =============================================================
  下層ページ用（境内のご案内）レスポンシブメディアクエリ
============================================================= */

/* 1024px以下 */
@media screen and (max-width: 1023px) {
  .highlights-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .temple-double-column {
    padding: 60px 30px;
  }

  .double-column-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .temple-detail-card .card-image-wrap {
    height: 240px;
  }

  .stone-towers-flex {
    flex-direction: column;
    gap: 30px;
  }

  .stone-towers-img-wrap {
    width: 100%;
  }

  .stone-towers-img {
    height: 300px;
  }
}

/* 768px以下 */
@media screen and (max-width: 767px) {
  .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .temple-double-column {
    padding: 50px 20px;
  }

  .card-detail-content {
    padding: 24px 18px;
  }

  .card-detail-title {
    font-size: 20px;
  }

  .stone-towers-lead {
    font-size: 14px;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .highlights-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .highlight-thumb-card .thumb-img-wrap {
    height: 100px;
  }
}

/* =============================================================
  下層ページ用（観音寺について）追加スタイル
============================================================= */

/* 2. 概要セクション */
.about-intro-section {
  padding: 80px 40px;
}

.about-intro-container {
  max-width: 760px;
  margin: 0 auto;
}

.about-lead-paragraph {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 2.2;
  color: var(--text-main);
  letter-spacing: 0.03em;
}

.about-overview-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 8px;
  padding: 30px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.about-overview-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--gold-dark);
  text-align: center;
  position: relative;
  padding-bottom: 10px;
}

.about-overview-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1.5px;
  background-color: var(--gold);
}

.about-overview-table {
  width: 100%;
  border-collapse: collapse;
}

.about-overview-table th,
.about-overview-table td {
  padding: 12px 10px;
  border-bottom: 1px dashed rgba(197, 160, 89, 0.15);
  font-size: 14.5px;
}

.about-overview-table th {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text-muted);
  width: 30%;
  text-align: left;
}

.about-overview-table td {
  color: var(--text-main);
  line-height: 1.5;
}

.about-overview-table tr:last-child th,
.about-overview-table tr:last-child td {
  border-bottom: none;
}

/* 3. 歴史導入セクション */
.about-history {
  padding: 80px 40px;
}

.about-history-container {
  max-width: 1100px;
  margin: 0 auto;
}

.history-content-flex {
  display: flex;
  gap: 50px;
  align-items: center;
}

.history-img-wrap {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.history-section-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.history-text-wrap {
  flex: 1.2;
}

.history-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text-main);
  position: relative;
}

.history-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 50px;
  height: 2px;
  background-color: var(--gold);
}

.history-text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-main);
  margin-bottom: 30px;
}

.history-action-area {
  margin-top: 20px;
}

/* 4. 住職ご挨拶セクション */
.about-priest {
  padding: 80px 40px;
  scroll-margin-top: 80px;
}

.priest-section-container {
  max-width: 1100px;
  margin: 0 auto;
}

.priest-main-flex {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.priest-text-block {
  flex: 1.4;
}

.priest-quote {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 24px;
  border-left: 3px solid var(--gold);
  padding-left: 20px;
}

.priest-message-intro {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-main);
  margin-bottom: 20px;
}

/* 住職ご挨拶アコーディオン */
.priest-details-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.priest-details-accordion.active {
  /* JS側で dynamic maxHeight を設定します */
}

.priest-details-inner {
  padding-top: 15px;
  border-top: 1px dashed rgba(197, 160, 89, 0.2);
  margin-bottom: 24px;
}

.priest-message-full {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.priest-biography {
  background-color: rgba(197, 160, 89, 0.03);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  padding: 24px;
}

.biography-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 16px;
  text-align: center;
}

.biography-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.biography-list li {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.biography-list li:last-child {
  margin-bottom: 0;
}

.bio-year {
  font-weight: 700;
  color: var(--text-main);
  width: 90px;
  flex-shrink: 0;
}

.bio-desc {
  color: var(--text-muted);
}

/* 開閉ボタン ＆ 署名 */
.priest-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.btn-priest-toggle {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.btn-priest-toggle:hover {
  background-color: var(--gold);
  color: var(--text-white);
}

.priest-signature {
  text-align: right;
  font-family: var(--font-serif);
}

.signature-title {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.signature-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.1em;
}

.signature-img {
  display: inline-block;
  height: 45px;
  max-width: 100%;
  width: auto;
  margin-top: 4px;
  vertical-align: middle;
  opacity: 0.95;
}

.priest-photo-wrap {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

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

/* 5. 観音寺の由緒 タイムライン */
.about-timeline {
  padding: 80px 40px;
}

.timeline-intro-text {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 50px auto;
  font-size: 15px;
  color: var(--text-muted);
}

.timeline-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: rgba(197, 160, 89, 0.25);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 50px;
  width: 100%;
}

.timeline-item::after {
  content: '';
  display: block;
  clear: both;
}

.timeline-badge {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 16px;
  height: 16px;
  background-color: var(--bg-body);
  border: 2px solid var(--gold);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.badge-dot {
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--gold);
  border-radius: 50%;
  margin: 3px auto 0 auto;
}

.timeline-panel {
  width: 44%;
  padding: 24px;
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  position: relative;
}

.timeline-item:nth-child(even) .timeline-panel {
  float: left;
  text-align: right;
}

.timeline-item:nth-child(odd) .timeline-panel {
  float: right;
  text-align: left;
}

/* 吹き出しの矢印 */
.timeline-panel::before {
  content: '';
  position: absolute;
  top: 22px;
  border-width: 10px;
  border-style: solid;
}

.timeline-item:nth-child(even) .timeline-panel::before {
  right: -20px;
  border-color: transparent transparent transparent rgba(197, 160, 89, 0.12);
}

.timeline-item:nth-child(even) .timeline-panel::after {
  content: '';
  position: absolute;
  top: 22px;
  right: -18px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent var(--bg-card);
}

.timeline-item:nth-child(odd) .timeline-panel::before {
  left: -20px;
  border-color: transparent rgba(197, 160, 89, 0.12) transparent transparent;
}

.timeline-item:nth-child(odd) .timeline-panel::after {
  content: '';
  position: absolute;
  top: 22px;
  left: -18px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent var(--bg-card) transparent transparent;
}

.timeline-time {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.timeline-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.timeline-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* 6. 平将門と日秀の伝承バナー (about.html専用) */
.about-masakado {
  background-size: cover;
  background-position: center 15%;
  padding: 80px 40px;
  color: var(--text-white);
}

.about-masakado-inner {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  gap: 50px;
  align-items: center;
}

.about-masakado-inner .masakado-visual {
  flex: 1;
}

.about-masakado-inner .masakado-statue {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 6px;
  border: 1px solid rgba(197, 160, 89, 0.3);
}

.about-masakado-inner .masakado-content {
  flex: 1.4;
}

.masakado-title-sub {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.masakado-desc-sub {
  font-size: 15px;
  line-height: 1.8;
  color: #e5e5e5;
  margin-bottom: 24px;
}

.masakado-action {
  margin-top: 10px;
}

/* 7, 8, 9. 3カラムエリア */
.about-three-cards {
  padding: 80px 40px;
}

.three-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.three-card-item {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s;
}

.three-card-item:hover {
  border-color: rgba(197, 160, 89, 0.3);
  box-shadow: 0 8px 25px rgba(197, 160, 89, 0.06);
}

.three-card-item .card-img-wrap {
  height: 200px;
  overflow: hidden;
}

.three-card-item .card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.three-card-item:hover .card-img-wrap img {
  transform: scale(1.03);
}

.three-card-item .card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.three-card-item .card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.three-card-item .card-subtitle-sub {
  font-size: 12.5px;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.4;
}

.three-card-item .card-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.three-card-item .card-footer-link {
  margin-top: auto;
}

/* 歴史コラムカード (中央) */
.column-style-card {
  border: 1px solid rgba(197, 160, 89, 0.25);
  background-color: rgba(197, 160, 89, 0.03);
  background-image: radial-gradient(rgba(197, 160, 89, 0.02) 1px, transparent 1px);
  background-size: 15px 15px;
}

.column-badge {
  display: inline-block;
  background-color: var(--gold);
  color: var(--text-white);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

/* 10. 関連ページ（about.html用4列ミニ） */
.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.feature-card-mini {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.feature-card-mini:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 20px rgba(197, 160, 89, 0.1);
}

.feature-card-mini .card-img-container {
  height: 120px;
  overflow: hidden;
}

.feature-card-mini .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.feature-card-mini:hover .card-img {
  transform: scale(1.05);
}

.feature-card-mini .card-body {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-card);
  flex-grow: 1;
}

.feature-card-mini .card-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0;
}

.feature-card-mini .card-link-arrow {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
}


/* =============================================================
  下層ページ用（観音寺について）レスポンシブメディアクエリ
============================================================= */

/* 1024px以下 */
@media screen and (max-width: 1023px) {
  .history-content-flex {
    flex-direction: column;
    gap: 30px;
  }

  .history-img-wrap, .history-text-wrap {
    width: 100%;
  }

  .history-section-img {
    height: 300px;
  }

  .priest-main-flex {
    flex-direction: column-reverse;
    gap: 35px;
  }

  .priest-text-block, .priest-photo-wrap {
    width: 100%;
  }

  .priest-photo {
    max-width: 400px;
    margin: 0 auto;
  }

  .timeline-line {
    left: 20px;
  }

  .timeline-badge {
    left: 20px;
  }

  .timeline-panel {
    width: calc(100% - 50px);
    float: right !important;
    text-align: left !important;
  }

  .timeline-panel::before {
    left: -20px !important;
    right: auto !important;
    border-color: transparent rgba(197, 160, 89, 0.12) transparent transparent !important;
  }

  .timeline-panel::after {
    left: -18px !important;
    right: auto !important;
    border-color: transparent var(--bg-card) transparent transparent !important;
  }

  .about-masakado-inner {
    flex-direction: column;
    gap: 30px;
  }

  .about-masakado-inner .masakado-visual,
  .about-masakado-inner .masakado-content {
    width: 100%;
  }

  .about-masakado-inner .masakado-statue {
    height: 240px;
  }

  .three-cards-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 768px以下 */
@media screen and (max-width: 767px) {
  .about-intro-section,
  .about-history,
  .about-priest,
  .about-timeline,
  .about-masakado,
  .about-three-cards {
    padding: 50px 20px;
  }

  .about-lead-paragraph {
    font-size: 15px;
    line-height: 2.0;
  }

  .history-title {
    font-size: 20px;
  }

  .history-text {
    font-size: 14px;
  }

  .priest-quote {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 15px;
  }

  .priest-signature {
    text-align: left;
    margin-top: 15px;
  }

  .priest-action-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .signature-name {
    font-size: 20px;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .about-overview-card {
    padding: 20px 15px;
  }

  .about-overview-table th,
  .about-overview-table td {
    font-size: 13.5px;
    padding: 10px 6px;
  }

  .card-grid-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =============================================================
  下層ページ用（交通アクセス）追加スタイル
============================================================= */

/* 2. 導入テキスト ＆ 基本情報カード */
.access-basic-section {
  padding: 80px 40px 40px 40px;
}

.access-basic-container {
  max-width: 1100px;
  margin: 0 auto;
}

.access-intro-paragraph {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 50px;
}

.access-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.access-info-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 8px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.access-info-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(197, 160, 89, 0.06);
}

.access-info-card .card-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(197, 160, 89, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(197, 160, 89, 0.15);
}

.access-info-card .gold-icon {
  color: var(--gold-dark);
}

.access-info-card .card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.access-info-card .card-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 3. Googleマップセクション */
.access-map-section {
  padding: 80px 40px;
}

.map-iframe-container {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(197, 160, 89, 0.2);
}

.map-btn-area {
  text-align: center;
  margin-top: 30px;
}

.btn-map-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--gold);
  color: var(--text-white);
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
  transition: all 0.3s;
}

.btn-map-open:hover {
  background-color: var(--gold-dark);
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.35);
  transform: translateY(-1px);
}

.btn-map-open .icon-external {
  display: inline-block;
}

/* 4, 5, 6. アクセス手段グリッド */
.access-methods-section {
  padding: 80px 40px;
}

.access-methods-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.method-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 8px;
  padding: 30px 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.card-header-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.15);
  padding-bottom: 12px;
}

.card-header-with-icon .gold-icon {
  color: var(--gold-dark);
}

.method-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0;
}

.method-body {
  flex-grow: 1;
}

.method-desc-list {
  padding-left: 20px;
  margin: 0;
}

.method-desc-list li {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.method-desc-list li:last-child {
  margin-bottom: 0;
}

.alert-box-mini-access {
  background-color: rgba(197, 160, 89, 0.04);
  border-left: 2px solid var(--gold);
  padding: 10px 14px;
  margin-top: 15px;
  border-radius: 0 4px 4px 0;
}

.alert-text-mini {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 電車徒歩ステップ */
.station-route-title {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.step-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.step-box {
  background-color: rgba(197, 160, 89, 0.03);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  padding: 12px 16px;
  width: 100%;
  text-align: center;
}

.step-box.highlight-box {
  background-color: var(--bg-card);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.08);
}

.step-name {
  font-size: 13.5px;
  color: var(--text-main);
}

.step-arrow {
  font-size: 12px;
  color: var(--gold-dark);
  font-weight: 700;
}

/* 7, 8. 横長ストリップカード */
.access-details-section {
  padding: 80px 40px;
}

.access-details-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.access-detail-strip-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 8px;
  padding: 30px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.access-detail-strip-card.first-time-box {
  background-color: rgba(247, 245, 240, 0.6);
  border-color: rgba(197, 160, 89, 0.2);
}

.access-detail-strip-card .card-icon-aside {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(197, 160, 89, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(197, 160, 89, 0.15);
}

.access-detail-strip-card .gold-icon {
  color: var(--gold-dark);
}

.access-detail-strip-card .card-body-content {
  flex-grow: 1;
}

.access-detail-strip-card .card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.access-detail-strip-card .card-text {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-muted);
}

.parking-note {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: #c92a2a;
}

.phone-link-in-text {
  color: var(--gold-dark);
  font-weight: 700;
  text-decoration: underline;
}

.phone-link-in-text:hover {
  color: var(--gold);
}


/* =============================================================
  下層ページ用（交通アクセス）レスポンシブメディアクエリ
============================================================= */

/* 1024px以下 */
@media screen and (max-width: 1023px) {
  .access-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .access-methods-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .access-detail-strip-card {
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }

  .access-detail-strip-card .card-icon-aside {
    width: 46px;
    height: 46px;
  }
}

/* 768px以下 */
@media screen and (max-width: 767px) {
  .access-basic-section,
  .access-map-section,
  .access-methods-section,
  .access-details-section {
    padding: 50px 20px;
  }

  .access-intro-paragraph {
    font-size: 15px;
    margin-bottom: 30px;
  }

  .map-iframe-container iframe {
    height: 350px;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .access-info-card,
  .method-card {
    padding: 24px 16px;
  }

  .map-iframe-container iframe {
    height: 300px;
  }
}

/* =============================================================
  下層ページ用（よくある質問）追加スタイル
============================================================= */

/* 2. 導入文 ＆ まず見てほしい質問カード */
.faq-intro-section {
  padding: 80px 40px 40px 40px;
}

.faq-intro-container {
  max-width: 1100px;
  margin: 0 auto;
}

.faq-intro-paragraph {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 50px;
}

.quick-questions-wrapper {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.quick-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  padding-bottom: 10px;
}

.quick-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 1px;
  background-color: var(--gold);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.quick-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-body);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  transition: all 0.3s;
}

.quick-card:hover {
  border-color: var(--gold);
  background-color: var(--bg-card);
  color: var(--gold-dark);
  box-shadow: 0 6px 15px rgba(197, 160, 89, 0.08);
}

.quick-card span {
  color: var(--gold);
  font-weight: 700;
}

/* 3. カテゴリー別ナビ */
.faq-categories-section {
  padding: 60px 40px;
}

.categories-container {
  max-width: 1100px;
  margin: 0 auto;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.category-nav-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-nav-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 25px rgba(197, 160, 89, 0.12);
}

.category-nav-card .cat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(197, 160, 89, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid rgba(197, 160, 89, 0.15);
}

.category-nav-card .gold-icon {
  color: var(--gold-dark);
}

.category-nav-card .cat-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.category-nav-card .cat-arrow {
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
}

/* 4. Q&Aアコーディオン本体 */
.faq-accordion-section {
  padding: 80px 40px;
}

.faq-accordion-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-cat-block {
  margin-bottom: 60px;
}

.faq-cat-block:last-child {
  margin-bottom: 0;
}

.faq-cat-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 24px;
  position: relative;
  padding-left: 15px;
}

.faq-cat-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background-color: var(--gold);
}

.faq-accordion-container .accordion-item {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.faq-accordion-container .accordion-header {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.faq-accordion-container .q-badge {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-dark);
  margin-right: 16px;
  flex-shrink: 0;
}

.faq-accordion-container .q-text {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  flex-grow: 1;
  line-height: 1.4;
}

.faq-accordion-container .accordion-icon {
  font-size: 18px;
  color: var(--gold);
  font-weight: 700;
  margin-left: 16px;
  flex-shrink: 0;
}

.faq-accordion-container .accordion-content-inner {
  padding: 0 24px 24px 60px; /* Qバッジとテキストに合わせてインデント */
}

.faq-answer-lead {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 12px;
}

.faq-answer-text {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-muted);
}

/* お布施セクション - 3つの布施カード */
.fuse-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
}

.fuse-type-card {
  background-color: rgba(197, 160, 89, 0.03);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  padding: 16px;
}

.fuse-type-label {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-dark);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 3px;
  margin-bottom: 10px;
}

.fuse-type-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* お布施セクション - 無財の七施ボックス */
.seven-gifts-box {
  background-color: rgba(247, 245, 240, 0.7);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 6px;
  padding: 20px;
  margin-top: 20px;
}

.seven-gifts-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  border-left: 2px solid var(--gold);
  padding-left: 10px;
}

.seven-gifts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gift-item {
  font-size: 13px;
  color: var(--text-muted);
}

.gift-item strong {
  color: var(--gold-dark);
}

/* お焼香ステップ図 */
.shoko-steps-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

.shoko-step {
  flex: 1;
  background-color: rgba(197, 160, 89, 0.03);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 6px;
  padding: 20px;
}

.shoko-step .step-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.shoko-step .step-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.shoko-step .step-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
}

.step-arrow-shoko {
  font-size: 20px;
  color: var(--gold);
  font-weight: 700;
}

.alert-box-mini-faq {
  background-color: rgba(247, 245, 240, 0.8);
  border-left: 2px solid var(--gold);
  padding: 12px 16px;
  margin-top: 15px;
  border-radius: 0 4px 4px 0;
}

/* 散骨注意喚起枠 */
.sankotsu-points-list {
  padding-left: 20px;
  margin: 20px 0;
}

.sankotsu-points-list li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sankotsu-points-list li:last-child {
  margin-bottom: 0;
}

.caution-box-faq {
  background-color: rgba(220, 53, 69, 0.02);
  border: 1.5px solid rgba(220, 53, 69, 0.15);
  border-radius: 6px;
  padding: 20px;
  margin-top: 20px;
}

.caution-title-faq {
  font-size: 14px;
  font-weight: 700;
  color: #c92a2a;
  margin-bottom: 8px;
}

.caution-text-faq {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* 5. 解決しない方へ */
.faq-unresolved {
  padding: 80px 40px;
}

.unresolved-container {
  max-width: 900px;
  margin: 0 auto;
}

.unresolved-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.unresolved-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  line-height: 1.5;
}

.unresolved-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.unresolved-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}


/* =============================================================
  下層ページ用（よくある質問）レスポンシブメディアクエリ
============================================================= */

/* 1024px以下 */
@media screen and (max-width: 1023px) {
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fuse-types-grid {
    grid-template-columns: 1fr;
  }

  .shoko-steps-wrapper {
    flex-direction: column;
    gap: 15px;
  }

  .step-arrow-shoko {
    transform: rotate(90deg);
  }
}

/* 768px以下 */
@media screen and (max-width: 767px) {
  .faq-intro-section,
  .faq-categories-section,
  .faq-accordion-section,
  .faq-unresolved {
    padding: 50px 20px;
  }

  .faq-intro-paragraph {
    font-size: 15px;
    margin-bottom: 30px;
  }

  .quick-questions-wrapper {
    padding: 20px;
  }

  .faq-cat-title {
    font-size: 18px;
  }

  .faq-accordion-container .accordion-header {
    padding: 16px;
  }

  .faq-accordion-container .q-badge {
    font-size: 18px;
    margin-right: 12px;
  }

  .faq-accordion-container .q-text {
    font-size: 14.5px;
  }

  .faq-accordion-container .accordion-content-inner {
    padding: 0 16px 16px 46px;
  }

  .unresolved-card {
    padding: 30px 20px;
  }

  .unresolved-title {
    font-size: 18px;
  }

  .unresolved-actions {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .unresolved-actions .btn-tel-fill,
  .unresolved-actions .btn-gold-fill {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .quick-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .categories-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .seven-gifts-grid {
    grid-template-columns: 1fr;
  }

  .faq-accordion-container .accordion-content-inner {
    padding: 0 16px 16px 16px; /* モバイルではインデントを詰める */
  }
}


/* ==========================================================================
   平将門と日秀の伝承ページ (masakado.html) 専用スタイル
   ========================================================================== */

/* 2. 日秀に残る将門伝承（導入） */
.intro-section-masakado {
  padding: 80px 40px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.intro-container-masakado {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* 右側にうっすらと和風の装飾を出すための背景模様（擬似要素） */
.intro-section-masakado::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 300px;
  height: 300px;
  background-image: url('../images/bg_header2.jpg');
  opacity: 0.05;
  border-radius: 50%;
  pointer-events: none;
}

.masakado-section-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 700;
  color: #120b08;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

.masakado-section-subtitle {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  color: #c5a059;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

.masakado-section-text {
  font-size: 16px;
  line-height: 2;
  color: #444;
  text-align: center;
}

.masakado-section-text p {
  margin-bottom: 1.5em;
}

.masakado-section-text p:last-child {
  margin-bottom: 0;
}

/* 3. 伝承マップ・史跡一覧 */
.map-list-section {
  padding: 80px 40px;
}

.map-list-container {
  max-width: 1200px;
  margin: 0 auto;
}

.map-list-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 26px;
  text-align: center;
  color: #120b08;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 15px;
}

.map-list-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #c5a059;
}

.map-list-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.map-list-card {
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.map-list-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(18, 11, 8, 0.08);
  border-color: #c5a059;
}

.map-list-card .card-img-wrap {
  position: relative;
  padding-top: 66%; /* 3:2 アスペクト比 */
  overflow: hidden;
  background-color: #e5dfd8;
}

.map-list-card .card-img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.map-list-card:hover .card-img-wrap img {
  transform: scale(1.05);
}

.map-list-card .card-body {
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.map-list-card .card-title {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 5px;
}

.map-list-card .card-desc {
  font-size: 12px;
  color: #777;
}

/* 4. 詳細コンテンツ共通 (神社、井戸、つながり) */
.detail-masakado-sec {
  padding: 90px 40px;
  background-color: #fff;
}

.detail-masakado-container {
  max-width: 1100px;
  margin: 0 auto;
}

.detail-two-columns {
  display: flex;
  gap: 50px;
  align-items: center;
}

.detail-two-columns.flex-reverse {
  flex-direction: row-reverse;
}

.detail-image-side {
  flex: 1;
}

.detail-large-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(18, 11, 8, 0.1);
  display: block;
}

.detail-content-side {
  flex: 1.2;
}

.title-with-flower {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.title-with-flower.justify-center {
  justify-content: center;
}

.flower-icon {
  font-size: 0;
  color: transparent;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('../images/decor_flower.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -0.15em;
}

.detail-section-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 28px;
  font-weight: 700;
  color: #120b08;
  letter-spacing: 0.05em;
  margin: 0;
}

.detail-catch {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  color: #c5a059;
  margin-bottom: 25px;
}

.detail-text-block {
  font-size: 15.5px;
  line-height: 1.85;
  color: #444;
}

.detail-text-block p {
  margin-bottom: 1.2em;
}

.detail-text-block p:last-child {
  margin-bottom: 0;
}

/* 5. 将門の井戸 - ミニ位置関係マップ */
.mini-map-box {
  margin-top: 30px;
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-left: 4px solid #c5a059;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(18, 11, 8, 0.03);
}

.mini-map-title {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 15px;
  letter-spacing: 0.05em;
}

.mini-map-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.map-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.map-point .map-icon {
  font-size: 24px;
}

.map-point .map-label {
  font-size: 13px;
  font-weight: 600;
  color: #120b08;
}

.map-arrow-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 10px;
}

.map-arrow-dots {
  font-family: monospace;
  font-size: 16px;
  color: #c5a059;
  letter-spacing: 2px;
}

.map-duration {
  font-size: 11px;
  color: #777;
  margin-top: 5px;
}

/* 6. 手賀沼を望む日秀の丘 (Heroセクション) */
.detail-masakado-hero {
  padding: 100px 40px;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  color: #fff;
  text-align: center;
}

.hero-masakado-inner {
  max-width: 800px;
  margin: 0 auto;
}

.hero-section-title-masakado {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.text-gold {
  color: #c5a059;
}

.hero-masakado-catch {
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  color: #c5a059;
  margin: 15px 0 30px;
  font-weight: 600;
}

.hero-masakado-text {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.9);
}

/* 7. 日秀周辺に残る古代の痕跡 (5カラム) */
.ancient-remains-section {
  padding: 90px 40px;
  background-color: #fff;
}

.ancient-container {
  max-width: 1200px;
  margin: 0 auto;
}

.ancient-main-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 28px;
  color: #120b08;
  text-align: center;
  margin-bottom: 10px;
}

.ancient-main-subtitle {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  color: #777;
  text-align: center;
  margin-bottom: 50px;
}

.ancient-grid-5,
.ancient-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.card-note {
  display: block;
  font-size: 11.5px;
  color: #8c827a;
  margin-top: 6px;
  line-height: 1.4;
}

.ancient-card {
  background-color: #faf8f5;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ancient-card .card-img-container {
  position: relative;
  padding-top: 75%; /* 4:3 アスペクト比 */
  overflow: hidden;
  background-color: #e5dfd8;
}

.ancient-card .card-img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ancient-card .card-body {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.ancient-card .card-title {
  font-family: "Noto Serif JP", serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 8px;
  border-bottom: 1px solid #e5dfd8;
  padding-bottom: 5px;
}

.ancient-card .card-text {
  font-size: 12.5px;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

/* 8. 観音寺とのつながり - ボタンエリア */
.connection-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid #c5a059;
  background-color: transparent;
  color: #c5a059;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-outline-gold:hover {
  background-color: #c5a059;
  color: #fff;
}

.btn-outline-gold span {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.btn-outline-gold:hover span {
  transform: translateX(3px);
}

/* 9. 歴史散策ルート */
.route-section {
  padding: 85px 40px;
  background-color: #fff;
  border-top: 1px solid #e5dfd8;
}

.route-container {
  max-width: 1000px;
  margin: 0 auto;
}

.route-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 26px;
  text-align: center;
  color: #120b08;
  margin-bottom: 50px;
}

.route-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.route-step {
  flex: 1;
  text-align: center;
  background-color: #faf8f5;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  padding: 25px 15px;
  box-shadow: 0 4px 12px rgba(18, 11, 8, 0.02);
  max-width: 200px;
}

.step-icon-wrap {
  font-size: 32px;
  margin-bottom: 10px;
}

.step-name {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 5px;
}

.step-desc {
  font-size: 11.5px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.route-arrow {
  font-size: 20px;
  color: #c5a059;
  margin: 0 10px;
  user-select: none;
}

/* 10. 関連ページ (4カラム) */
.feature-card-quad {
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.feature-card-quad:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(18, 11, 8, 0.08);
  border-color: #c5a059;
}

.feature-card-quad .card-img-container {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
}

.feature-card-quad .card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.feature-card-quad:hover .card-img {
  transform: scale(1.05);
}

.feature-card-quad .card-body {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feature-card-quad .card-title {
  font-family: "Noto Serif JP", serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #120b08;
  margin: 0;
}

.feature-card-quad .card-link-arrow {
  color: #c5a059;
  font-weight: 700;
  transition: transform 0.3s ease;
}

.feature-card-quad:hover .card-link-arrow {
  transform: translateX(3px);
}

.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ==========================================================================
   平将門と日秀の伝承ページ レスポンシブメディアクエリ (1023px以下)
   ========================================================================== */

@media screen and (max-width: 1023px) {
  .intro-section-masakado,
  .map-list-section,
  .detail-masakado-sec,
  .ancient-remains-section,
  .route-section {
    padding: 60px 24px;
  }

  .detail-two-columns {
    flex-direction: column;
    gap: 30px;
  }

  .detail-two-columns.flex-reverse {
    flex-direction: column;
  }

  .detail-content-side {
    width: 100%;
  }

  .detail-image-side {
    width: 100%;
  }

  .map-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ancient-grid-5,
  .ancient-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .route-steps {
    flex-direction: column;
    gap: 15px;
  }

  .route-step {
    max-width: 100%;
    width: 100%;
  }

  .route-arrow {
    transform: rotate(90deg);
    margin: 5px 0;
  }
}

/* 767px以下 */
@media screen and (max-width: 767px) {
  .masakado-section-title {
    font-size: 26px;
  }

  .masakado-section-subtitle {
    font-size: 16px;
  }

  .masakado-section-text {
    font-size: 15px;
    text-align: left; /* スマホでは読みやすく左寄せ */
  }

  .map-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .detail-section-title {
    font-size: 22px;
  }

  .detail-catch {
    font-size: 16px;
  }

  .detail-text-block {
    font-size: 14.5px;
  }

  .hero-section-title-masakado {
    font-size: 26px;
  }

  .hero-masakado-catch {
    font-size: 17px;
  }

  .hero-masakado-text {
    font-size: 14.5px;
  }

  .ancient-main-title {
    font-size: 22px;
  }

  .ancient-grid-5,
  .ancient-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .route-title {
    font-size: 22px;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .map-list-grid {
    grid-template-columns: 1fr;
  }

  .ancient-grid-5,
  .ancient-grid-4 {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .card-grid-4 {
    grid-template-columns: 1fr;
  }

  .connection-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .btn-outline-gold {
    width: 100%;
  }

  .mini-map-content {
    flex-direction: column;
    gap: 15px;
  }

  .map-arrow-line {
    transform: rotate(90deg);
    padding: 10px 0;
  }
  
  .map-arrow-dots {
    letter-spacing: 0px;
  }

  .map-duration {
    transform: rotate(-90deg);
    margin-top: 8px;
  }
}


/* ==========================================================================
   観音寺だより・お知らせページ (news.html) 専用スタイル
   ========================================================================== */

/* 2. 重要なお知らせエリア */
.important-news-section {
  padding: 60px 40px;
  background-color: #fff;
}

.important-news-container {
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid #e5dfd8;
  border-left: 4px solid #c5a059;
  border-radius: 4px;
  background-color: #faf8f5;
  padding: 30px;
  position: relative;
  box-shadow: 0 4px 15px rgba(18, 11, 8, 0.02);
}

.important-news-header {
  margin-bottom: 20px;
}

.important-label {
  display: inline-block;
  background-color: #c5a059;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

.important-news-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.important-news-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  text-decoration: none;
  color: #120b08;
  transition: all 0.3s ease;
}

.important-news-item:hover {
  border-color: #c5a059;
  box-shadow: 0 4px 12px rgba(18, 11, 8, 0.05);
}

.important-news-item .item-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.important-news-item .item-date {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #777;
}

.important-news-item .item-cat-label {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background-color: #f3ece3;
  color: #8c765c;
  border-radius: 2px;
}

.important-news-item .item-title-wrap {
  flex-grow: 1;
}

.important-news-item .item-title {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #120b08;
}

.important-news-item .item-desc {
  font-size: 13px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
}

.important-news-item .item-arrow {
  color: #c5a059;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.important-news-item:hover .item-arrow {
  transform: translateX(5px);
}

/* 3. カテゴリー切り替えナビ */
.filter-nav-section {
  padding: 30px 40px 0;
  background-color: #fff;
}

.filter-nav-container {
  max-width: 1200px;
  margin: 0 auto;
}

.filter-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-btn {
  background-color: #fff;
  border: 1px solid #e5dfd8;
  color: #555;
  padding: 10px 24px;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

.filter-btn:hover {
  border-color: #c5a059;
  color: #c5a059;
}

.filter-btn.active {
  background-color: #c5a059;
  border-color: #c5a059;
  color: #fff;
}

/* 4. 記事一覧 */
.news-grid-section {
  padding: 40px 40px 80px;
  background-color: #fff;
}

.news-grid-container {
  max-width: 1200px;
  margin: 0 auto;
}

.news-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.blog-card {
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

.blog-card.fade-out {
  opacity: 0;
  transform: translateY(20px);
}

.blog-card:hover {
  border-color: #c5a059;
  box-shadow: 0 10px 25px rgba(18, 11, 8, 0.08);
}

.blog-card .card-img-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
  overflow: hidden;
  background-color: #faf8f5;
}

.blog-card .card-img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card:hover .card-img-wrap img {
  transform: scale(1.05);
}

.blog-card .card-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-card .card-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.blog-card .card-date {
  font-family: "Montserrat", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #777;
}

.blog-card .card-cat {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
}

.blog-card .label-news {
  background-color: #f3ece3;
  color: #8c765c;
}

.blog-card .label-garden {
  background-color: #e2f0d9;
  color: #5b8449;
}

.blog-card .label-event {
  background-color: #e2eff5;
  color: #4a7d96;
}

.blog-card .label-blog {
  background-color: #f8eaf0;
  color: #b06282;
}

.blog-card .card-title {
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 700;
  color: #120b08;
  line-height: 1.5;
  margin-bottom: 10px;
}

.blog-card .card-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #666;
  margin-bottom: 20px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card .card-link {
  font-size: 13px;
  font-weight: 700;
  color: #c5a059;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: auto;
}

.blog-card .card-link span {
  transition: transform 0.3s ease;
}

.blog-card:hover .card-link span {
  transform: translateX(4px);
}

/* 5. ページネーション */
.pagination-wrapper {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination .page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  color: #555;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.pagination .page-num:hover {
  border-color: #c5a059;
  color: #c5a059;
}

.pagination .page-num.active {
  background-color: #c5a059;
  border-color: #c5a059;
  color: #fff;
}

.pagination .page-dots {
  color: #999;
  padding: 0 5px;
  letter-spacing: 2px;
}

.pagination .page-next {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 15px;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  color: #555;
  text-decoration: none;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.pagination .page-next:hover {
  border-color: #c5a059;
  color: #c5a059;
}

.pagination .page-next span {
  margin-left: 5px;
}

/* 6. 最新の観音寺報PDF & 7. 月別アーカイブ (2カラム) */
.news-resources-section {
  padding: 80px 40px;
  background-color: #fff;
  border-top: 1px solid #e5dfd8;
}

.resources-container {
  max-width: 1200px;
  margin: 0 auto;
}

.resources-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
}

.pdf-download-box,
.archive-box {
  background-color: #faf8f5;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  padding: 35px;
}

.resources-box-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 25px;
  border-bottom: 1.5px solid #c5a059;
  padding-bottom: 8px;
  letter-spacing: 0.05em;
}

.pdf-content-wrapper {
  display: flex;
  gap: 25px;
}

.pdf-cover-wrap {
  flex-shrink: 0;
  width: 110px;
}

.pdf-cover-img {
  width: 100%;
  height: auto;
  border: 1px solid #dcd5cc;
  box-shadow: 0 4px 10px rgba(18, 11, 8, 0.08);
  display: block;
}

.pdf-info-wrap {
  flex-grow: 1;
}

.pdf-edition-title {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 8px;
}

.pdf-desc-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: #666;
  margin-bottom: 20px;
}

.btn-pdf-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #c5a059;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn-pdf-download:hover {
  background-color: #a88444;
}

.past-pdf-link-wrap {
  margin-top: 15px;
}

.arrow-link-gold {
  font-size: 13px;
  font-weight: 700;
  color: #c5a059;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.arrow-link-gold span {
  transition: transform 0.3s ease;
}

.arrow-link-gold:hover span {
  transform: translateX(3px);
}

.archive-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.archive-list li {
  border-bottom: 1px dashed #e5dfd8;
}

.archive-list li:last-child {
  border-bottom: none;
}

.archive-item-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  text-decoration: none;
  color: #444;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.archive-item-link:hover {
  color: #c5a059;
}

.archive-count {
  font-family: "Montserrat", sans-serif;
  color: #888;
  font-size: 13px;
  font-weight: 500;
  margin-left: 5px;
}

.arrow-gold {
  color: #c5a059;
  font-weight: 700;
  font-family: monospace;
}

.archive-more {
  text-align: right;
  margin-top: 15px;
}


/* ==========================================================================
   観音寺だより・お知らせページ レスポンシブメディアクエリ (1023px以下)
   ========================================================================== */

@media screen and (max-width: 1023px) {
  .important-news-section,
  .filter-nav-section,
  .news-grid-section,
  .news-resources-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .important-news-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    padding-right: 40px; /* 矢印スペース */
  }

  .important-news-item .item-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .important-news-item:hover .item-arrow {
    transform: translateY(-50%) translateX(3px);
  }

  .important-news-item .item-desc {
    max-width: 100%;
    white-space: normal;
  }

  .news-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .resources-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* 767px以下 */
@media screen and (max-width: 767px) {
  .filter-buttons {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  
  .filter-btn {
    padding: 8px 18px;
    font-size: 13px;
  }

  .news-cards-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .pdf-content-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .pdf-cover-wrap {
    width: 130px;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .important-news-container {
    padding: 20px 15px;
  }

  .important-news-item {
    padding: 12px;
  }

  .blog-card .card-body {
    padding: 15px;
  }

  .blog-card .card-title {
    font-size: 16px;
  }

  .pdf-download-box,
  .archive-box {
    padding: 20px;
  }

  .btn-pdf-download {
    width: 100%;
  }
}


/* ==========================================================================
   はじめての方へページ (first.html) 専用スタイル
   ========================================================================== */

/* 2. まずは目的をお選びください */
.first-purpose-section {
  padding: 80px 40px;
  background-color: #faf8f5;
  border-bottom: 1px solid #e5dfd8;
}

.first-purpose-container {
  max-width: 1200px;
  margin: 0 auto;
}

.first-title-serif {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 28px;
  font-weight: 700;
  color: #120b08;
  text-align: center;
  margin-bottom: 50px;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 15px;
}

.first-title-serif::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #c5a059;
}

.purpose-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.purpose-card {
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  padding: 30px 20px;
  text-decoration: none;
  color: #120b08;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.purpose-card:hover {
  border-color: #c5a059;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(18, 11, 8, 0.05);
}

.purpose-icon-wrap {
  color: #c5a059;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.purpose-card:hover .purpose-icon-wrap {
  transform: scale(1.1);
}

.purpose-card-title {
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}

.purpose-card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 25px;
  flex-grow: 1;
}

.purpose-card-arrow {
  font-size: 14px;
  color: #c5a059;
  transition: transform 0.3s ease;
  margin-top: auto;
}

.purpose-card:hover .purpose-card-arrow {
  transform: translateX(4px);
}

/* 3. お参り / 4. 法要 2カラム */
.first-intro-block {
  padding: 90px 40px;
  background-color: #fff;
  border-bottom: 1px solid #e5dfd8;
}

.first-intro-container {
  max-width: 1100px;
  margin: 0 auto;
}

.first-two-columns {
  display: flex;
  gap: 50px;
  align-items: center;
}

.first-two-columns.flex-reverse {
  flex-direction: row-reverse;
}

.intro-image-side {
  flex: 1;
}

.intro-large-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(18, 11, 8, 0.08);
  display: block;
}

.intro-content-side {
  flex: 1.2;
}

.intro-section-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: 700;
  color: #120b08;
  letter-spacing: 0.05em;
  margin: 0;
}

.intro-catch {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  color: #c5a059;
  margin: 15px 0 20px;
}

.intro-text {
  font-size: 15px;
  line-height: 1.85;
  color: #444;
  margin-bottom: 30px;
}

.intro-btn-wrap {
  display: flex;
  gap: 15px;
}

/* 5. 永代供養をご相談の方へ 帯 */
.first-eidaikuyou-strip {
  padding: 60px 40px;
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  border-bottom: 1px solid #e5dfd8;
}

.eidaikuyou-strip-container {
  max-width: 1200px;
  margin: 0 auto;
}

.strip-flex-box {
  display: flex;
  align-items: center;
  gap: 40px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #c5a059;
  border-radius: 6px;
  padding: 30px 40px;
  box-shadow: 0 10px 30px rgba(18, 11, 8, 0.05);
}

.strip-image-area {
  flex-shrink: 0;
}

.strip-circle-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #c5a059;
  box-shadow: 0 4px 10px rgba(18, 11, 8, 0.1);
  object-fit: cover;
  display: block;
}

.strip-text-area {
  flex-grow: 1;
}

.strip-title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.strip-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

.strip-btn-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  width: 250px;
}

.strip-btn-area .btn-gold-fill,
.strip-btn-area .btn-white-fill {
  width: 100%;
  padding: 12px 15px;
  font-size: 13.5px;
  text-align: center;
  font-weight: 700;
  border-radius: 4px;
}

.btn-white-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #c5a059;
  color: #c5a059;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-white-fill:hover {
  background-color: #fcf9f5;
  box-shadow: 0 4px 10px rgba(197, 160, 89, 0.15);
}

.btn-white-fill span {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.btn-white-fill:hover span {
  transform: translateX(3px);
}

/* 6. 初めてのご相談の流れ */
.first-flow-section {
  padding: 90px 40px;
  background-color: #faf8f5;
  border-bottom: 1px solid #e5dfd8;
}

.first-flow-container {
  max-width: 1100px;
  margin: 0 auto;
}

.flow-steps-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flow-step-box {
  flex: 1;
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(18, 11, 8, 0.02);
  position: relative;
  max-width: 220px;
}

.step-num-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background-color: #8c765c;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.flow-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fbf8f4;
  color: #c5a059;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  border: 1px solid #f3ece3;
}

.flow-step-box .step-title {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 10px;
}

.flow-step-box .step-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

.flow-step-arrow {
  font-size: 20px;
  color: #c5a059;
  margin: 0 10px;
  user-select: none;
}

/* 7. 観音寺の見どころ */
.highlight-cards-section {
  padding: 90px 40px;
}

.highlight-cards-container {
  max-width: 1200px;
  margin: 0 auto;
}

.highlight-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.highlight-card-item {
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.highlight-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(18, 11, 8, 0.06);
  border-color: #c5a059;
}

.highlight-card-item .card-img-wrap {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
}

.highlight-card-item .card-img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.highlight-card-item:hover .card-img-wrap img {
  transform: scale(1.05);
}

.highlight-card-item .card-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.highlight-card-item .card-title {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 10px;
}

.highlight-card-item .card-text {
  font-size: 13px;
  line-height: 1.65;
  color: #666;
  margin-bottom: 20px;
  flex-grow: 1;
}

.highlight-card-item .card-more-link {
  font-size: 13px;
  font-weight: 700;
  color: #c5a059;
  text-decoration: none;
  transition: transform 0.3s ease;
  align-self: flex-start;
  margin-top: auto;
}

.highlight-card-item:hover .card-more-link {
  transform: translateX(3px);
}

/* 8. よくある質問 */
.first-faq-section {
  padding: 90px 40px;
  border-top: 1px solid #e5dfd8;
}

.first-faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-list {
  margin-top: 40px;
}

/* 9. 交通アクセス */
.first-access-section {
  padding: 90px 40px;
  background-color: #faf8f5;
  border-top: 1px solid #e5dfd8;
}

.first-access-container {
  max-width: 1100px;
  margin: 0 auto;
}

.access-info-side {
  flex: 1.2;
}

.access-image-side {
  flex: 1;
}

.access-large-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(18, 11, 8, 0.05);
  display: block;
}

.access-address-box {
  margin-bottom: 30px;
}

.access-temple-name {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 8px;
}

.address-text {
  font-size: 15px;
  color: #444;
  font-weight: 600;
}

.access-methods {
  margin-bottom: 35px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.method-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.method-label {
  font-size: 11px;
  font-weight: 700;
  background-color: #8c765c;
  color: #fff;
  padding: 3px 8px;
  border-radius: 2px;
  flex-shrink: 0;
  width: 60px;
  text-align: center;
}

.method-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: #444;
  margin: 0;
}

.access-buttons {
  display: flex;
  gap: 15px;
}


/* ==========================================================================
   はじめての方へページ レスポンシブメディアクエリ (1023px以下)
   ========================================================================== */

@media screen and (max-width: 1023px) {
  .first-purpose-section,
  .first-intro-block,
  .first-eidaikuyou-strip,
  .first-flow-section,
  .highlight-cards-section,
  .first-faq-section,
  .first-access-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .first-two-columns {
    flex-direction: column;
    gap: 30px;
  }

  .first-two-columns.flex-reverse {
    flex-direction: column;
  }

  .intro-content-side,
  .intro-image-side,
  .access-info-side,
  .access-image-side {
    width: 100%;
  }

  .purpose-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .strip-flex-box {
    flex-direction: column;
    padding: 30px;
    gap: 20px;
    text-align: center;
  }

  .strip-btn-area {
    width: 100%;
  }

  .flow-steps-wrapper {
    flex-direction: column;
    gap: 15px;
  }

  .flow-step-box {
    max-width: 100%;
    width: 100%;
    padding: 25px 20px;
  }

  .flow-step-arrow {
    transform: rotate(90deg);
    margin: 5px 0;
  }

  .highlight-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 767px以下 */
@media screen and (max-width: 767px) {
  .first-title-serif {
    font-size: 24px;
  }

  .intro-section-title {
    font-size: 22px;
  }

  .intro-catch {
    font-size: 16px;
  }

  .intro-text {
    font-size: 14.5px;
  }

  .intro-btn-wrap {
    flex-direction: column;
    gap: 10px;
  }

  .intro-btn-wrap .btn-outline-gold {
    width: 100%;
  }

  .strip-title {
    font-size: 19px;
  }

  .strip-desc {
    font-size: 13.5px;
  }

  .highlight-card-item .card-title {
    font-size: 15px;
  }

  .highlight-card-item .card-body {
    padding: 15px;
  }

  .access-temple-name {
    font-size: 19px;
  }

  .access-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .access-buttons .btn-outline-gold {
    width: 100%;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .purpose-cards-grid {
    grid-template-columns: 1fr;
  }

  .highlight-grid-4 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   近隣史跡めぐりページ (history.html) 専用スタイル
   ========================================================================== */

/* 案内文 */
.history-intro-text-section {
  padding: 60px 40px 40px;
  background-color: #fff;
  text-align: center;
}

.history-intro-text-container {
  max-width: 900px;
  margin: 0 auto;
}

.history-intro-p {
  font-size: 16px;
  line-height: 1.85;
  color: #333;
  margin: 0;
}

/* 2. 史跡マップ・一覧 */
.history-map-list-section {
  padding: 60px 40px 80px;
  background-color: #faf8f5;
  border-bottom: 1px solid #e5dfd8;
}

.history-map-list-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 3. 散策ルート案 */
.history-route-section {
  padding: 80px 40px;
  border-bottom: 1px solid #e5dfd8;
}

.history-route-container {
  max-width: 1100px;
  margin: 0 auto;
}

.route-map-wrapper {
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  padding: 40px 30px;
  box-shadow: 0 4px 15px rgba(18, 11, 8, 0.02);
}

.route-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.route-node-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  text-align: center;
}

.route-icon-box {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #c5a059;
  background-color: #fcfaf7;
  color: #c5a059;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.route-node-item:hover .route-icon-box {
  transform: scale(1.08);
  background-color: #c5a059;
  color: #fff;
}

.route-node-title {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  color: #120b08;
  margin: 0;
}

.route-arrow-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  text-align: center;
}

.route-arrow-icon {
  font-size: 18px;
  color: #c5a059;
  margin-bottom: 5px;
}

.route-arrow-text {
  font-size: 11.5px;
  font-weight: 600;
  color: #8c765c;
  background-color: #f5ede2;
  padding: 3px 10px;
  border-radius: 20px;
}

.route-note {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin: 0;
}

/* 4. 5. 6. 史跡詳細ブロック */
.history-detail-block {
  padding: 90px 40px;
  border-bottom: 1px solid #e5dfd8;
}

.history-detail-block:nth-child(even) {
  background-color: #faf8f5;
}

.history-detail-container {
  max-width: 1100px;
  margin: 0 auto;
}

.detail-two-columns {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.detail-two-columns.flex-reverse {
  flex-direction: row-reverse;
}

.detail-image-side {
  flex: 1;
}

.detail-large-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(18, 11, 8, 0.08);
  display: block;
}

.detail-content-side {
  flex: 1.2;
}

.detail-catch {
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 700;
  color: #c5a059;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

.detail-text-area {
  margin-bottom: 30px;
}

.detail-text-area p {
  font-size: 15px;
  line-height: 1.85;
  color: #444;
  margin: 0 0 15px 0;
}

.detail-text-area p:last-child {
  margin-bottom: 0;
}

/* 補足・伝承コラムボックス */
.relation-box-gold {
  background-color: #fbf9f4;
  border: 1px solid #c5a059;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(197, 160, 89, 0.03);
}

.relation-box-title {
  font-family: "Noto Serif JP", serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #c5a059;
  margin: 0 0 8px 0;
  letter-spacing: 0.05em;
}

.relation-box-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* 簡易ミニフロー */
.relation-mini-flow {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.flow-site {
  font-size: 13px;
  font-weight: 700;
  color: #120b08;
  background-color: #fff;
  border: 1px solid #e5dfd8;
  padding: 6px 12px;
  border-radius: 4px;
}

.flow-ico {
  color: #c5a059;
  margin-right: 3px;
}

.flow-line {
  position: relative;
  flex-grow: 1;
  height: 1px;
  background-color: #c5a059;
  text-align: center;
}

.flow-line span {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: #8c765c;
  white-space: nowrap;
}

.flow-line::after {
  content: "➔";
  position: absolute;
  right: -5px;
  top: -8px;
  font-size: 10px;
  color: #c5a059;
}

/* 日秀西遺跡の発掘物4カラム */
.excavation-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.excavation-card {
  background-color: #fff;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.excavation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(18, 11, 8, 0.05);
  border-color: #c5a059;
}

.excavation-card .ex-img-wrap {
  position: relative;
  padding-top: 70%;
  overflow: hidden;
  background-color: #f7f5f2;
}

.excavation-card .ex-img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.excavation-card:hover .ex-img-wrap img {
  transform: scale(1.05);
}

.excavation-card .ex-body {
  padding: 15px;
  flex-grow: 1;
}

.excavation-card .ex-title {
  font-family: "Noto Serif JP", serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #120b08;
  margin-bottom: 8px;
}

.excavation-card .ex-text {
  font-size: 12px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* 7. 観音寺とたどる、日秀の歴史 & 8. 史跡を訪れる方へ */
.history-footer-resources {
  padding: 90px 40px;
  background-color: #fff;
  border-bottom: 1px solid #e5dfd8;
}

.history-footer-resources .resources-container {
  max-width: 1200px;
  margin: 0 auto;
}

.history-meaning-box {
  background-color: #faf8f5;
  border: 1px solid #e5dfd8;
  border-radius: 4px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.meaning-text {
  font-size: 14.5px;
  line-height: 1.8;
  color: #444;
  margin: 0 0 25px 0;
}

.meaning-buttons {
  display: flex;
  gap: 15px;
  margin-top: auto;
}

.history-visitor-box {
  border: 1px solid #c5a059;
  background-color: #fbf9f4;
  border-radius: 4px;
  padding: 40px;
}

.visitor-content-wrap {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

.visitor-icon-wrap {
  color: #c5a059;
  flex-shrink: 0;
  background-color: #fff;
  border: 1px solid #f3ece3;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visitor-text-wrap {
  flex-grow: 1;
}

.visitor-main-text {
  font-size: 14.5px;
  font-weight: 700;
  color: #120b08;
  margin: 0 0 15px 0;
  line-height: 1.5;
}

.visitor-rule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.visitor-rule-list li {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  position: relative;
  padding-left: 15px;
}

.visitor-rule-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #c5a059;
  font-weight: 700;
}


/* ==========================================================================
   近隣史跡めぐりページ レスポンシブメディアクエリ (1023px以下)
   ========================================================================== */

@media screen and (max-width: 1023px) {
  .history-intro-text-section,
  .history-map-list-section,
  .history-route-section,
  .history-detail-block,
  .history-footer-resources {
    padding-left: 24px;
    padding-right: 24px;
  }

  .detail-two-columns {
    flex-direction: column;
    gap: 30px;
  }

  .detail-two-columns.flex-reverse {
    flex-direction: column;
  }

  .detail-content-side,
  .detail-image-side {
    width: 100%;
  }

  .excavation-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 767px以下 */
@media screen and (max-width: 767px) {
  .history-intro-p {
    font-size: 14.5px;
    text-align: left;
  }

  .route-map-wrapper {
    padding: 25px 20px;
  }

  .route-nodes {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
  }

  .route-node-item {
    width: 100%;
  }

  .route-icon-box {
    width: 60px;
    height: 60px;
  }

  .route-arrow-box {
    width: 100%;
  }

  .route-arrow-icon {
    transform: rotate(90deg);
    margin: 5px 0;
  }

  .detail-catch {
    font-size: 18px;
  }

  .detail-text-area p {
    font-size: 14px;
  }

  .relation-box-gold {
    padding: 15px;
  }

  .relation-mini-flow {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .flow-site {
    text-align: center;
  }

  .flow-line {
    height: 15px;
    width: 1px;
    background-color: #c5a059;
    margin: 0 auto;
    flex-grow: 0;
  }

  .flow-line span {
    display: none; /* 縦フロー時はテキスト非表示 */
  }

  .flow-line::after {
    transform: rotate(90deg);
    right: -4px;
    top: 5px;
  }

  .meaning-text {
    font-size: 13.5px;
  }

  .meaning-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .meaning-buttons .btn-outline-gold {
    width: 100%;
  }

  .visitor-content-wrap {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
  }

  .visitor-rule-list {
    text-align: left;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .excavation-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------
  平将門守り本尊 セクション (about.html 追加)
------------------------------------------------------------- */
.about-kannon-honzon {
  background-color: var(--bg-main);
  padding: 80px 0;
}

.honzon-block {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.honzon-text-area {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-main);
  text-align: justify;
}

.honzon-p {
  margin-bottom: 0;
}

.honzon-images-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.honzon-img-col {
  flex: 1;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.honzon-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.15);
  background-color: #0c0908;
}

.honzon-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.honzon-img-wrap:hover .honzon-photo {
  transform: scale(1.05);
}

.honzon-img-caption {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  .about-kannon-honzon {
    padding: 60px 0;
  }
  
  .honzon-images-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .honzon-img-col {
    max-width: 100%;
    width: 100%;
  }
  
  .honzon-img-wrap {
    aspect-ratio: 4 / 3;
  }
}

/* -------------------------------------------------------------
  観世音菩薩縁起 ページ (engisho.html)
------------------------------------------------------------- */
.engisho-section {
  background-color: var(--bg-main);
  padding: 80px 0;
}

.engisho-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 縁起書ボックス共通 */
.engi-box {
  background-color: #fbf9f4;
  border: 1px solid rgba(197, 160, 89, 0.25);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  position: relative;
}

.engi-box::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px dashed rgba(197, 160, 89, 0.15);
  pointer-events: none;
  border-radius: 6px;
}

.engi-box-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text-main);
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}

.engi-content {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 2.1;
  color: #2c2520;
  text-align: justify;
  letter-spacing: 0.08em;
}

.engi-content p {
  margin-bottom: 20px;
  text-indent: 1em;
}

.engi-content p:last-child {
  margin-bottom: 0;
}

.engi-content .note-text {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  background-color: rgba(197, 160, 89, 0.05);
  padding: 15px;
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  text-indent: 0;
  line-height: 1.7;
  margin-top: 30px;
}

.engi-content .poem-block {
  text-align: center;
  margin: 30px 0;
  padding: 20px;
  background-color: rgba(28, 21, 18, 0.02);
  border-radius: 4px;
  text-indent: 0;
  font-style: italic;
}

.engi-content .poem-block p {
  text-indent: 0;
  margin-bottom: 5px;
}

.engi-content .signature-block {
  text-align: right;
  margin-top: 40px;
  text-indent: 0;
}

.engi-content .signature-block p {
  text-indent: 0;
  margin-bottom: 5px;
}

@media (max-width: 767px) {
  .engisho-section {
    padding: 60px 0;
  }
  
  .engi-box {
    padding: 25px;
  }
  
  .engi-box::before {
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
  }
  
  .engi-box-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .engi-content {
    font-size: 14px;
    line-height: 1.9;
  }
}

/* -------------------------------------------------------------
  お参りの仕方 ステップ (first.html 追加)
------------------------------------------------------------- */
.omairi-steps-block {
  margin: 25px 0;
  padding: 22px;
  background-color: #fcfbfa;
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 6px;
}

.omairi-steps-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-main);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 18px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}

.omairi-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.omairi-steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.omairi-steps-list .step-num {
  width: 22px;
  height: 22px;
  background-color: var(--gold);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
  font-family: var(--font-sans);
}

.omairi-steps-list .step-body {
  flex-grow: 1;
}

.omairi-steps-list .step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 3px;
  font-family: var(--font-serif);
}

.omairi-steps-list .step-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.omairi-steps-list .nenbutsu-text {
  font-weight: 600;
  color: var(--gold);
}

/* -------------------------------------------------------------
  日秀の地名 セクション (masakado.html 追加)
------------------------------------------------------------- */
.about-hibiri-name {
  background-color: var(--bg-main);
  padding: 80px 24px; /* Added horizontal padding to prevent text cramping */
}

.hibiri-block {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.hibiri-layout-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

.hibiri-text-col {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-main);
  text-align: justify;
}

.hibiri-text-col p {
  margin-bottom: 18px;
}

.hibiri-sub-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  margin-top: 25px;
  margin-bottom: 12px;
}

.hibiri-list {
  padding-left: 20px;
  margin-bottom: 20px;
}

.hibiri-list li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.hibiri-img-col {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hibiri-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.15);
}

.hibiri-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.hibiri-img-wrap:hover .hibiri-photo {
  transform: scale(1.05);
}

.hibiri-img-caption {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.hibiri-column-note {
  background-color: #fbf9f4;
  border-left: 4px solid var(--gold);
  padding: 20px 25px;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.hibiri-column-note .note-p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-main);
  margin: 0;
}

@media (max-width: 1023px) {
  .hibiri-layout-row {
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;
  }
  
  .hibiri-img-col {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 767px) {
  .about-hibiri-name {
    padding: 50px 16px; /* Optimized padding for mobile devices */
  }
  
  .hibiri-column-note {
    padding: 15px 18px;
  }
}

/* -------------------------------------------------------------
  WordPress風ブログ記事ページ (blog01.html 用)
------------------------------------------------------------- */
.blog-post-section {
  padding: 60px 0;
  background-color: var(--bg-main);
}

.blog-post-layout {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-main-content {
  flex: 1;
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(197, 160, 89, 0.1);
  text-align: left;
}

.blog-meta-top {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 15px;
  font-size: 13px;
}

.blog-post-date {
  color: var(--text-muted);
}

.blog-post-category {
  background-color: rgba(197, 160, 89, 0.1);
  color: var(--gold);
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 600;
}

.blog-post-title-main {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--text-main);
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 25px;
}

.blog-eyecatch {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 35px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.blog-eyecatch img {
  width: 100%;
  height: auto;
  display: block;
}

/* 記事本文内のタイポグラフィ */
.blog-body-text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-main);
}

.blog-body-text p {
  margin-bottom: 25px;
  text-align: justify;
}

.blog-body-text h2 {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text-main);
  border-left: 4px solid var(--gold);
  padding-left: 15px;
  margin-top: 45px;
  margin-bottom: 20px;
  font-weight: 700;
}

.blog-body-text h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--text-main);
  margin-top: 35px;
  margin-bottom: 15px;
  font-weight: 600;
}

.blog-body-text blockquote {
  background-color: #fbf9f4;
  border-left: 3px solid var(--gold);
  padding: 20px 25px;
  margin: 30px 0;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

.blog-body-text blockquote p {
  margin: 0;
  color: var(--text-muted);
}

/* 記事下区切り線 */
.blog-divider {
  margin-top: 60px;
  margin-bottom: 40px;
  border: 0;
  border-top: 1px solid rgba(197, 160, 89, 0.2);
}

/* 執筆者プロフィールカード */
.author-profile-card {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(197, 160, 89, 0.2);
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--gold);
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info {
  flex: 1;
  text-align: left;
}

.author-name-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.author-label {
  font-size: 11px;
  background-color: var(--gold);
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: bold;
}

.author-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.author-signature-img {
  height: 28px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.author-bio {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ブログの右サイドバー */
.blog-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sidebar-widget {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  border: 1px solid rgba(197, 160, 89, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  text-align: left;
}

.widget-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-main);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
}

.recent-posts-widget-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recent-posts-widget-list li a {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
  transition: color 0.3s ease;
}

.recent-posts-widget-list li a:hover {
  color: var(--gold);
}

.widget-post-thumb {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.widget-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-post-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.widget-post-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.widget-post-date {
  font-size: 11px;
  color: var(--text-muted);
}

/* ページ送り・戻るボタン */
.blog-post-navigation {
  margin-top: 40px;
  text-align: center;
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .blog-post-layout {
    flex-direction: column;
    gap: 30px;
  }
  
  .blog-sidebar {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .blog-main-content {
    padding: 25px 20px;
  }
  
  .blog-post-title-main {
    font-size: 22px;
    margin-bottom: 18px;
  }
  
  .author-profile-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .blog-divider {
    margin-top: 40px;
    margin-bottom: 30px;
  }
}

/* Contact Form 7 Styles */
.contact-form-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 30px;
  background: #fbfbfa;
  border: 1px solid #eae6df;
  border-radius: 4px;
}
.wpcf7-form p {
  margin-bottom: 20px;
}
.wpcf7-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-main);
}
.wpcf7-form .required-mark {
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: 8px;
  vertical-align: middle;
}
.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #d5cebf;
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  background-color: #fff;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.wpcf7-text:focus,
.wpcf7-textarea:focus,
.wpcf7-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
  outline: none;
}
.wpcf7-textarea {
  height: 150px;
  resize: vertical;
}
.wpcf7-submit {
  display: block;
  width: 250px;
  margin: 30px auto 0;
  padding: 15px 30px;
  background-color: var(--gold);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}
.wpcf7-submit:hover {
  background-color: #a37f3f;
  transform: translateY(-2px);
}
@media (max-width: 767px) {
  .contact-form-wrapper {
    padding: 25px 20px;
  }
  .wpcf7-submit {
    width: 100%;
  }
}