@charset "utf-8";

/* PC用メインヘッダー (1200px〜) */
@import url("header-pc.css");
/* 追従ヘッダー & UIパーツ (共通/タブレット 1199px〜701px) */
@import url("header-ui.css");
/* SP用ドロワーメニュー (700px以下) */
@import url("header-sp.css");
/* メインビュー */
@import url("mv.css");

:root {
  /* フォントサイズ */
  --body-size: clamp(17px, 1.1rem + 0.2vw, 19px);
  --body-lh: 1.8;
  --font12-size: 12px;
  --font14-size: 14px;
  --font16-size: 16px;	
  --font18-size: 18px;
  --font21-size: 21px;
  --font24-size: 24px;
  --font30-size: 30px;	
  --tablet-font-size: 1.2rem;
  
  --color-main: #333;
  --color-blue: #00227B; 
  --color-red: #E60012;
  --color-pink: #F04E67;
  --color-green: #00B900;
  --color-gold: #C8A951;
  --color-bg-purple: rgba(216, 191, 216, 0.75);
  --color-yellow: #F1D17A;
  
  --font-base: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Bebas Neue", sans-serif;
	
  /* 幅設定 */
  --width-pc: 1200px;
  --width980: 980px;
  --width700: 700px;
  --width480: 480px;
  --width350: 350px;
	
  /* 間隔 */
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}

*, *:before, *:after { box-sizing: border-box; }

html {
  color: var(--text-color); scroll-behavior: smooth; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch;
   height: 100%;
}

body {
  font-size: var(--body-size); line-height: var(--body-lh); letter-spacing: 0.01em;
  font-family: var(--font-serif); font-weight: 400; font-style: normal; font-feature-settings: "palt";
  scroll-behavior: smooth; position: relative; overflow-x: hidden; overscroll-behavior-x: none;
    min-height: 100vh;
  
  
}

ul, ol { list-style: none; padding: 0; margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
address { font-style: normal; }
address p { text-decoration: none; }
article { overflow-x: hidden; }

/* リンク設定 */
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; color: inherit; transition: 0.5s; }
a img { border: none; }
a img:hover { opacity: 0.7; transition: 0.5s; }

/* Only クラス */
.pc-only { display: block; }
.sp-only, .small-tab-only, .normal-sp-only, .small-sp-only { display: none; }
.sp-none{display: inline;}
@media (max-width: 1199px) { .pc-only { display: none; } }
@media screen and (max-width: 700px) { .small-tab-only { display: block; } }
@media screen and (max-width: 480px) { .sp-only { display: block; } .sp-none{display: none;}}
@media screen and (max-width: 399px) { .normal-sp-only { display: block; } }
@media screen and (max-width: 350px) { .small-sp-only { display: block; } }

/* 文字寄せ・余白ユーティリティ */
.txt_left { text-align: left; }
.txt_center { text-align: center; }
.txt_right { text-align: right; }

.pt10 { padding-top: var(--space-10); }
.pt20 { padding-top: var(--space-20); }
.pt30 { padding-top: var(--space-30); }
.pt40 { padding-top: var(--space-40); }
.pt60 { padding-top: clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem); }

.pb10 { padding-bottom: var(--space-10); }
.pb20 { padding-bottom: var(--space-20); }
.pb30 { padding-bottom: var(--space-30); }
.pb40 { padding-bottom: var(--space-40); }
.pb60 { padding-bottom: clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem); }

.mt10 { margin-top: var(--space-10); }
.mt20 { margin-top: var(--space-20); }
.mt30 { margin-top: var(--space-30); }
.mt40 { margin-top: var(--space-40); }
.mt60 { margin-top: var(--space-60); }

.mb10 { margin-bottom: var(--space-10); }
.mb20 { margin-bottom: var(--space-20); }
.mb30 { margin-bottom: var(--space-30); }
.mb40 { margin-bottom: var(--space-40); }
.mb60 { margin-bottom: clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem); }

/* マーカーアニメーション */
.marker-animation {
    background-image: linear-gradient(transparent 60%, #ffe566 60%);
    background-repeat: no-repeat; background-position: left bottom; background-size: 0% 100%;
    transition: background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.marker-animation.is-active { background-size: 100% 100%; }


/* 固定ヘッダーの調整 */

section[id] {
  scroll-margin-top: 80px; /* ヘッダーの高さ + 余白10px程度 */
}

@media screen and (max-width: 1199px) {
  section[id] {
    scroll-margin-top: 70px; /* タブレット・スマホ用の高さ調整 */
  }
}

/* --- スクロールバー --- */
/* スクロールバー全体のコンテナ */
.scrollbar-wrapper {
  position: absolute;  /* ご指定の通りabsoluteに変更 */
  bottom: 0;           /* 下端に固定 */
  height: 300px;
  width: 60px;         /* 幅を指定することで中央揃えの基準を安定させます */
  z-index: 10;         /* 必要に応じて重なり順を調整 */
  
  /* PC時の位置（デフォルト） */
  left: 5%;
  transform: translateX(-50%);
}



/* 「scroll」のテキスト */
.scrollbar-text {
  display: inline-block;
  position: absolute;
  bottom: 0;
  padding: 10px 10px 110px;
  color: #000;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
  left: 50%;
  transform: translateX(-50%);
}

/* 線とドットの土台 */
.scrollbar-line-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1px;
}

/* 垂直の線 */
.scrollbar-line-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100px;
  background: #000;
}

/* 動くドット */
.scrollbar-line-box::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  animation: circlemove 3s ease-in-out infinite,
             circlemovehide 3s ease-out infinite;
}

/* アニメーション：上下移動 */
@keyframes circlemove {
  0% { bottom: 95px; }
  100% { bottom: 0px; }
}

/* アニメーション：フェードアウト */
@keyframes circlemovehide {
  0% { opacity: 0; }
  50% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { opacity: 0; }
}

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

.scrollbar-text {
  color: #FFF;
}

  .scrollbar-wrapper {
    left: 10%;
  }
  
  
  /* 垂直の線 */
.scrollbar-line-box::after {
  background: #FFF;
}

/* 動くドット */
.scrollbar-line-box::before {
  
  background: #FFF;
  
}
}

/* =========================================
   ページ設定
========================================= */

.header-offset{
padding-top: 70px;
flex: 1 0 auto;
}


.page_contents{
  width: min(1200px, 100% - clamp(16px, 4vw, 40px));         
  max-width: 1200px; 
  margin: 0 auto;
  font-size: 16px;
}

@media (min-width: 701px){
  .page_contents{
    width: 95%;
  }
}



@media (max-width: 700px){
  .page_contents{
    width: 100%;
	padding: 0 20px;
  }
}



.page_title-area{
position: relative;
background-image: url("../images/page-title-bg.webp");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}


.page_title-wrapper{
max-width: 1200px;
margin: 0 auto;
font-weight: 400;
}


.page_title-wrapper h1{
font-size: 24px;
text-align: center;
}




@media (min-width: 701px){
.page_title-area{
background-repeat: no-repeat;
background-position: center right;
background-size: cover;
}


.page_title-wrapper{
height: 75px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
		line-height: 1.5em;
}
}

.page-h2-title{
color: var(--color-gold);
    font-size: 24px;
    border-bottom: solid var(--color-gold) 1px;
    padding: 0.25em;
	font-weight: 400;
}


.h3-title{
font-size: 21px;
font-weight: 400;
}

@media (max-width: 700px){



.page_title-wrapper{
        width: 100%;
		height: 75px;
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
		line-height: 1.5em;
}



}




dl.information dt {
    padding: 0.25em;
    margin-bottom: 0.5em;
    border-bottom: dotted #abb8c3 1px;
    line-height: 1.5em;
    padding-left: 1.5em;
    text-indent: -1.4em;
	font-size: 1.2em;
}


dl.information dd
 {
    margin-bottom: 2em;
}

ul.item-list {
    padding: 1.5em 0em 1.5em;
    margin-left: 2.5em;
    font-size: 0.95em;
    line-height: 1.75em;
}


.notfound-page {
  min-height: calc(100vh - 70px - 220px);
  display: flex;
  flex-direction: column;
}

.notfound-page > section {
  flex: 1;
}


@media (max-width: 700px) {
  .notfound-page {
    min-height: calc(100vh - 70px - 300px);
  }
}


/* パンくずリスト全体のコンテナ */
.breadcrumbs {
    padding: 10px 0;
    font-size: 14px;
    color: #666;
}

/* 各パンくず要素のリンク */
.breadcrumbs a {
    text-decoration: none;
    color: #0073aa; /* リンク色 */
}

/* リンクの上にホバーした時 */
.breadcrumbs a:hover {
    text-decoration: underline;
}

/* 現在のページのスタイル（リンクになっていない要素） */
.breadcrumbs .current {
    color: #333;
    font-weight: bold;
}

/* 区切り文字のスタイル（設定で変更可能） */
.breadcrumbs > span > span {
    margin: 0 5px;
    color: #999;
}



ul.item-list {
    margin: 1.5em 0; /* 上下の余白のみ設定、左右は親に委ねる */
    list-style: none;
    padding-left: 1.5em;
    font-size: 0.95em;
}

ul.item-list li {
    margin-bottom: 0.5em;
    border: none;
    width: 100% !important;
    position: relative;
    padding-left: 1em;
    list-style: none;
}

/* Font Awesome アイコン */
ul.item-list li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058"; /* チェックマークアイコン */
    position: absolute;
    left: -1.5em;
    top: 0;
    color: var(--text-color); /* アイコンの色 */
}

/* スマホ用調整 */
@media only screen and (max-width: 980px) {
    ul.item-list {
        margin: 1em 0;
        list-style: none;
        padding-left: 1em;
    }
    ul.item-list li::before {
        left: -0.5em;
    }
}


/* WP-PageNavi 全体 */
.wp-pagenavi {
    display: flex;
    justify-content: center;
    margin: 50px 0;
   
}

.wp-pagenavi a, 
.wp-pagenavi span {
    display: inline-block;
    margin: 0 4px;
    padding: 8px 16px;
    text-decoration: none;
    color: #5d4a3e; /* 落ち着いた茶色 */
    border-bottom: 2px solid #e0d8d2; /* 下線のみで上品に */
    transition: 0.3s;
}

/* ホバー時 */
.wp-pagenavi a:hover {
    color: #8c705f;
    border-bottom-color: #8c705f;
}

/* 現在のページ */
.wp-pagenavi span.current {
    color: #fff;
    background-color: var(--color-gold);
    border-bottom-color: var(--color-gold);
    border-radius: 1px;
}

/* ページ情報の非表示（任意：スッキリさせるため） */
.wp-pagenavi span.pages {
    display: none;
}


/* マップを囲むコンテナのデザイン */
.g-map {
  width: 100%;
  margin: 60px auto 0;
  overflow: hidden;
  line-height: 0; /* 下部の隙間を排除 */
}

/* iframe自体のスタイル */
.g-map iframe {
  width: 100%;
  height: 450px; /* デフォルトの高さ */
  /* 地図を少しスタイリッシュにするフィルタ（お好みで調整） */
  filter: grayscale(0.2) contrast(1.1); 
  transition: filter 0.3s ease;
}

/* マップにホバーした時に色を鮮明にする演出 */
.g-map iframe:hover {
  filter: grayscale(0);
}

/* 700px以下でのサイズ指定 (4:3) */
@media (max-width: 700px) {
  .g-map iframe {
    height: auto; /* 高さを自動にしてアスペクト比を優先 */
    aspect-ratio: 4 / 3;
  }
}

/* =========================================
   ベース背景・Z-index
========================================= */
.sec-houonbyou, .sec-worries, .sec-features, .sec-flow, .sec-pricing, .sec-cta, .sec-segaki, .sec-voice, .sec-greeting, .sec-faq, footer {
    position: relative; z-index: 2; background: #fff; 
}
/* =========================================
   報恩廟 紹介セクション
========================================= */
.sec-houonbyou {
    position: relative;
    width: 100%;
    overflow: hidden;
	margin-top: 100svh;
}

/* 背景を固定気味に配置する場合の設定 */
.houonbyou-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.houonbyou-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* コンテンツ幅を最大1200pxに制限 */
.houonbyou-inner {
    max-width: var(--width-pc);
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* キャッチコピー */
.catch-wrap {
	 font-size: clamp(1.875rem, 1.725rem + 0.75vw, 2.625rem);
	 padding: 0 clamp(1.125rem, 0.875rem + 1.25vw, 1.25rem);
}
.catch-main {
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 500;
}
.catch-lead {
    font-size: 0.7em;
}

/* お墓の画像エリア */
.image-wrap {
    width: 100%;
    margin: 0 auto clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem);
    overflow: hidden; /* 画像がはみ出ないようにする */
}
.image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: center center;
}

/* 報恩廟 タイトル周り */

.desc-title-box {
    position: relative;
    display: inline-block;
    margin-bottom: 40px;
}
.desc-title-box .ruby {
    display: block;
    font-size: 0.3em;
    letter-spacing: 0.2em;
    margin: 5px 0;
}
.desc-title-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.temple-sub {
    font-size: clamp(18px, 2.5vw, 26px);
    line-height: 1.4;
}
.main-name {
    font-size: clamp(40px, 6vw, 68px);
    letter-spacing: 0.1em;
    font-weight: 500;
	line-height: 1;
}

/* 詳細テキスト */
.desc-text-box p {
    font-size: clamp(1.125rem, 1.087rem + 0.19vw, 1.313rem);
    line-height: 2.2;
    margin-bottom: 15px;
	padding: 0 clamp(1.125rem, 0.875rem + 1.25vw, 1.25rem);
}




/* =========================================
   お悩み・不安セクション
========================================= */
.sec-worries {
    width: 100%;
}

/* 既存コードを踏襲したコンテナ */
.worries-inner {
    max-width: var(--width-pc);
    margin: 0 auto;
    padding: 0 clamp(1.125rem, 0.875rem + 1.25vw, 1.25rem);
}

/* タイトル */
.worries-title {
    text-align: center;
    font-size: clamp(1.875rem, 1.725rem + 0.75vw, 2.625rem);
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.05em;
	margin-bottom: 40px;
}

/* グリッドレイアウト（PCは3列） */
.worries-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px; 
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 各アイテム */
.worries-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 画像ラッパー */
.worries-img {
  width: 100%;
    max-width: 225px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px; 
}

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

/* テキスト */
.worries-text {
    font-size: clamp(1.125rem, 1.087rem + 0.19vw, 1.313rem);
    line-height: 1.5;
}


/* タブレット〜スマホ向けの調整（2列・1列への変化） */
@media (max-width: 980px) {
    .worries-list {
        grid-template-columns: repeat(2, 1fr); /* 2列にする場合 */
        gap: 40px 20px;
    }
}

@media (max-width: 700px) {
    .sec-worries {
        padding: 60px 0;
    }
    .worries-title {
        margin-bottom: 40px;
    }
    .worries-list {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 40px;
    }
   
}


/* =========================================
   選ばれる理由セクション
========================================= */
.sec-features {
    width: 100%;
}


.features-bg{
background-image: url("../images/features-bg.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

.features-inner {
    max-width: var(--width-pc);
    margin: 0 auto;
    padding: 0 20px;
}

/* タイトルエリア（報恩廟セクションのデザインを踏襲・アレンジ） */
.features-title-wrap {
    text-align: center;
    margin-bottom: 80px;
}
.features-title-wrap .ruby {
    display: block;
    font-size: 14px;
    letter-spacing: 0.2em;
    margin-bottom: 5px;
}
.features-title-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}
.features-title-flex .temple-sub {
    font-size: clamp(16px, 2vw, 22px);
    text-align: right;
    line-height: 1.4;
}
.features-title-flex .main-name {
    font-size: clamp(36px, 5vw, 54px);
    letter-spacing: 0.1em;
    font-weight: 500;
}
.features-subtitle {
    font-size: clamp(24px, 3.5vw, 32px);
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* 特徴リストのレイアウト */
.features-list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* 各特徴の間の余白 */
}

/* 各特徴アイテム（PCは横並び） */
.feature-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* 偶数番目は画像を左、テキストを右にする（リバース） */
.feature-item.feature-reverse {
    flex-direction: row-reverse;
}

/* テキストエリア */
.feature-text-box {
    width: 65%;
}

/* 見出し部分（バッジ＋タイトル） */
.feature-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

@media (max-width: 350px) {
.feature-head {
    flex-direction: column;
}
}

/* 特徴バッジ（丸い黄色アイコン） */
.feature-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: var(--color-yellow); /* デザインに合わせた黄色系 */
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.1;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1); /* ほんのり影をつけてリッチに */
}
.feature-badge span {
    font-size: 30px;
}

/* 特徴のタイトル */
.feature-title {
    font-size: clamp(20px, 2.5vw, 26px);
    line-height: 1.5;
    font-weight: 500;
    padding-top: 10px; /* バッジとの縦位置のバランス調整 */
}

/* 特徴の説明文 */
.feature-desc {
    font-size: 18px;
    line-height: 2;
}

/* 画像エリア */
.feature-img-box {
    width: 30%;
    background-color: #ffffcc; /* 薄い黄色の背景 */
    border-radius: 25px; /* 角丸25px */
    padding: 25px 0; /* 上下の余白25px、左右は0 */
    display: flex;
    justify-content: center; /* 画像を左右中央に配置 */
    align-items: center; /* 画像を上下中央に配置 */
}

/* 画像本体のサイズ制限 */
.feature-img-box img {
    width: 65%; /* 背景枠に対して65%程度の大きさに留める（お好みで調整してください） */
    max-width: 220px; /* 画面が大きくなってもこれ以上大きくしない上限値 */
    height: auto;
    display: block;
}


/* =========================================
   レスポンシブ対応（タブレット〜スマホ）
========================================= */
@media (max-width: 980px) {
    /* 特徴の間の余白を少し詰める */
    .features-list {
        gap: 60px;
    }
    
    /* 縦積みに変更 */
    .feature-item,
    .feature-item.feature-reverse {
        flex-direction: column-reverse; /* 画像を上に、テキストを下にする場合はcolumn-reverse */
        gap: 30px;
    }

    .feature-text-box,
    .feature-img-box {
        width: 100%;
    }

    /* バッジサイズをスマホ用に少し小さく調整 */
    .feature-badge {
        width: 65px;
        height: 65px;
        font-size: 12px;
    }
    .feature-badge span {
        font-size: 24px;
    }
    
    .feature-title {
        padding-top: 5px;
    }
}

@media (max-width: 599px) {
    .sec-features {
        padding: 60px 0;
    }
    .features-title-wrap {
        margin-bottom: 50px;
    }
    .features-title-flex {
        gap: 10px;
    }
}
/* =========================================
   ご供養のしるべ（流れ）セクション
========================================= */
.sec-flow {
    width: 100%;
    padding: 72px 0 56px;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
}

.flow-inner {
    margin: 0 auto;
    position: relative;
}

/* タイトル */
.flow-title-wrap {
    text-align: center;
    margin-bottom: 44px;
}

.flow-title-wrap .ruby {
    display: block;
    font-size: 14px;
    letter-spacing: 0.2em;
    margin-bottom: 5px;
}

.flow-title-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.flow-title-flex .main-name {
    font-size: clamp(36px, 5vw, 54px);
    letter-spacing: 0.1em;
    font-weight: 500;
}



.flow-title-flex .temple-sub {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
	margin-top: 10px;
}

.flow-subtitle {
    font-size: 18px;
    line-height: 1.8;
}

/* スワイプ案内 */
.flow-swipe-hint {
    display: none;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-red);
    margin: 0 0 2em;
    letter-spacing: 0.05em;
}

/* スクロール領域 */
.flow-scroll-area {
    position: relative;
}

/* リスト */
.flow-list {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: stretch;
    gap: 48px;
    padding: 0;
    margin: 0;
    will-change: transform;
}

/* 各ステップ */
.flow-item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.flow-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 65%;
    transform: translateY(-50%) rotate(45deg);
    border-top: 3px solid var(--color-gold);
    border-right: 3px solid var(--color-gold);
    z-index: 2;
}

/* ヘッダー */
.flow-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
    min-height: 120px; /* 行数差をここで吸収 */
}

.flow-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    color: #4A3A22;
    background-color: #fff;
    line-height: 1;
}

.flow-badge span {
    font-size: 12px;
    letter-spacing: 0.05em;
}

.flow-badge .num {
    font-size: 24px;
    font-weight: bold;
    margin-top: 3px;
    font-family: serif;
}

.flow-head-text {
    flex-grow: 1;
}

.flow-title {
    font-size: clamp(1.313rem, 1.275rem + 0.19vw, 1.5rem);
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
    padding-top: 5px;
}

.flow-title-sub {
    font-size: 18px;
    font-weight: normal;
}

.flow-desc {
    font-size: 16px;
    line-height: 1.6;
}

/* カード */
.flow-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
    min-height: 0;
}

.flow-card {
    flex-grow: 1;
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    padding: 18px 14px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
}

.flow-card-title {
    font-size: 21px;
	color: var(--color-gold);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-card-img {
    width: 100%;
    height: clamp(180px, 16vw, 250px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.flow-card-img img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

.flow-card-text {
    font-size: 16px;
    line-height: 1.8;
    width: 100%;
}

/* スクロールバー */
.flow-scrollbar {
    width: min(72%, 760px);
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 10px;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    z-index: 20;
    overflow: hidden;
    margin: 16px auto 0; /* カードのすぐ下へ */
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.flow-scrollbar-thumb {
    width: 80px;
    height: 100%;
    background-color: var(--color-gold);
    border-radius: 10px;
    transform: translateX(0);
    transition: transform 0.1s ease-out, width 0.1s ease-out;
    cursor: grab;
    touch-action: none;
}

.flow-scrollbar.is-dragging .flow-scrollbar-thumb {
    cursor: grabbing;
}

/* =========================================
   1200px以上
========================================= */
@media (min-width: 1200px) {
    .sec-flow {
        padding: 56px 0 40px;
    }

    .flow-title-wrap {
        margin-bottom: 80px;
    }
	
	
	

    .flow-list {
        gap: 42px;
    }

    .flow-item {
        width: 460px;
    }

    .flow-item:not(:last-child)::after {
        right: -40px;
        width: 100px;
        height: 100px;
    }

    .flow-head {
        min-height: 124px;
        margin-bottom: 14px;
    }

    .flow-card {
        padding: 16px 14px;
    }

    .flow-card-img {
        height: clamp(180px, 15vw, 240px);
        margin-bottom: 12px;
    }

    .flow-scrollbar {
        width: min(72%, 760px);
        margin-top: 16px;
    }
}

/* =========================================
   701px ～ 1199px
========================================= */
@media (min-width: 701px) and (max-width: 1199px) {
    .sec-flow {
        padding: 72px 0 56px;
    }

    .flow-list {
        gap: 36px;
    }

    .flow-item {
        width: calc((100vw - 80px) / 2);
    }

    .flow-item:not(:last-child)::after {
        right: -26px;
        width: 80px;
        height: 80px;
    }

    .flow-head {
        min-height: 132px;
    }

    .flow-card-wrap {
        margin-top: 12px;
    }

    .flow-card-img {
        height: clamp(160px, 24vw, 230px);
    }

    .flow-scrollbar {
        width: calc(100% - 40px);
        margin-top: 20px;
    }
}

/* =========================================
   700px以下 スマホは自然スワイプ
========================================= */
@media (max-width: 700px) {
    .sec-flow {
        padding: 60px 0 80px;
        overflow: hidden;
    }

    .flow-title-wrap {
        margin-bottom: 30px;
    }

    .flow-title-flex {
        flex-direction: column;
        gap: 5px;
    }
	
	.flow-title-flex .temple-sub {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    margin-top: 5px;
}

    .flow-subtitle {
        font-size: 18px;
    }

    .flow-swipe-hint {
        display: block;
        padding: 0 20px;
    }

    .flow-scroll-area {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scroll-padding-right: 20px;
    }

    .flow-scroll-area::-webkit-scrollbar {
        display: none;
    }

    .flow-list {
        gap: 16px;
        padding-left: 20px;
        padding-right: 20px;
        will-change: auto;
        box-sizing: border-box;
    }

    .flow-item {
        width: calc(100vw - 76px);
        scroll-snap-align: start;
    }

    .flow-item:not(:last-child)::after {
        right: -12px;
        width: 50px;
        height: 50px;
        border-width: 2px;
    }

    .flow-head {
        min-height: auto; 
		flex-direction: column;
    }

    .flow-card-wrap {
        margin-top: 12px;
    }

    .flow-card {
        padding: 18px 14px;
    }

    .flow-card-img {
        height: auto;
    }

    .flow-card-img img {
        width: 100%;
        max-width: 100%;
        max-height: none;
        height: auto;
    }

    .flow-scrollbar {
        width: calc(100% - 40px);
        margin: 18px auto 0;
    }
	
	
	.flow-badge {
	margin: 0 auto;
	}
	
}
/* =========================================
   ご志納金（料金プラン）セクション
========================================= */

.sec-pricing {
    width: 100%;
    padding: 60px 0 60px;
	background: url("../images/pricing-bg.webp");
	background-size: cover;
	background-position: bottom center;
}

.pricing-inner {
    max-width: var(--width-pc);
    margin: 0 auto;
    padding: 0 20px;
}

/* タイトルエリア */

.pricing-main-title .main-name {
    font-size: clamp(40px, 5.5vw, 56px);
    font-weight: 500;
}

/* リード文 */
.pricing-lead-box {
    text-align: center;
}
.lead-gold {
    color: var(--color-gold);
    font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem);
    line-height: 1.8;
    margin-bottom: 25px;
    font-weight: 500;
}
.lead-black {
    font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
    line-height: 2;
}

/* 料金表ラッパー */
.pricing-table-wrap {
    max-width: 800px; /* 表の最大幅を制限して美しく見せる */
    margin: 0 auto;
}

/* 表のタイトル */
.table-title {
    text-align: center;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
}
.table-title .small {
    font-size: 0.9em;
	color: var(--color-red);
}

/* テーブル本体 */
.fee-table {
    width: 100%;
    table-layout: fixed; /* 左右の幅を均等(50:50)にする */
    border-collapse: collapse;
}

.fee-table th,
.fee-table td {
    padding: 25px 10px;
    text-align: center;
    vertical-align: middle;
}

/* ヘッダー行のデザイン */
.fee-table th {
    color: var(--color-gold);
    font-weight: 500;
    font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem);
    border-top: 2px solid var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
}

/* データ行のデザイン */
.fee-table td {
    border-bottom: 1px solid var(--color-gold);
    font-size: clamp(18px, 2.2vw, 20px);
    color: var(--color-main);
}

/* 数字を大きく見せるタイポグラフィ */
.fee-table .num {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 500;
    letter-spacing: 0.05em;
    font-family: var(--font-serif);
}

/* 単位（年間・円）を少し小さく */
.fee-table .unit {
    font-size: clamp(16px, 1.8vw, 18px);
    margin-left: 5px;
}

.fee-table .remarks {
    font-size: clamp(14px, 1.6vw, 16px);
}

/* 注釈テキスト */
.table-note {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}
.table-note-right {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.6;
    text-align: right;
    color: #333;
}

/* =========================================
   レスポンシブ対応（スマホ）
========================================= */
@media (max-width: 699px) {
    .sec-pricing {
        padding: 60px 0;
    }
    
    .pricing-main-title {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    
    /* スマホでは表のパディングを狭くして収める */
    .fee-table th,
    .fee-table td {
        padding: 15px 5px;
    }
    
    /* 注釈の配置をスマホでは少し調整 */
    .table-note,
    .table-note-right {
        font-size: 13px;
        text-align: left; /* スマホでは右寄せだと読みにくい場合があるため左揃え */
    }
}

.kaimyo-sample-btn {
    width: 280px;
    padding: 15px 0;
    background-color: var(--color-gold); /* 画像に近い落ち着いたマスタード/ゴールド系 */
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* アイコンとテキストの隙間 */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease;
	margin: 0 auto;
  }

  .kaimyo-sample-btn:hover {
    opacity: 0.8;
  }

  .kaimyo-sample-btn i {
    font-size: 16px;
  }
  
  
/* ====== モーダルウィンドウのスタイル ====== */
.kaimyo-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 999999 !important;
  justify-content: center;
  align-items: center;
}

.kaimyo-modal-content {
  position: relative;
  width: 720px;
  max-width: 90%; /* スマホなど画面幅が狭い場合への対応 */
  background-color: #ffffff;
  padding: 20px 20px 40px; /* 下部はドット用に余白を広めにとる */
  box-sizing: border-box;
}

/* クローズボタン */
.kaimyo-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 32px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.3s ease;
}

.kaimyo-modal-close:hover {
  color: #cccccc;
}

/* ====== スライダーのスタイル ====== */
.kaimyo-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* はみ出たスライドを隠す */
}

.kaimyo-slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease-in-out; /* スライドのアニメーション */
}

.kaimyo-slide {
  min-width: 100%; /* 各スライドをコンテナ幅100%にする */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kaimyo-slide img {
  max-width: 100%;
  max-height: 60vh; /* 縦長画像でも画面に収まるように制限 */
  object-fit: contain;
}

/* コメント部分 (14px指定) */
.kaimyo-slide-caption {
  font-size: 14px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 0;
  padding: 0 10px;
}

/* ====== 矢印ナビゲーション ====== */
.kaimyo-slider-nav {
  position: absolute;
  top: 45%; /* 画像の中央付近に配置 */
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  z-index: 10;
}

.kaimyo-slider-nav:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.kaimyo-slider-nav.prev {
  left: 10px;
}

.kaimyo-slider-nav.next {
  right: 10px;
}

/* ====== ドットインジケーター ====== */
.kaimyo-slider-dots {
  position: absolute;
  bottom: -30px; /* 画像やコメントの下に配置 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
}

.kaimyo-dot {
  width: 8px;
  height: 8px;
  background-color: #cccccc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 現在表示されているドットは少し大きめにする */
.kaimyo-dot.active {
  background-color: #666666;
  width: 12px;
  height: 12px;
}

/* ====== レスポンシブ (700px以下) ====== */
@media (max-width: 700px) {
  .kaimyo-modal-close {
    top: -35px;
  }
  .kaimyo-slider-nav {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}
/* =========================================
   施餓鬼セクション
========================================= */

.sec-segaki {
    width: 100%;
    padding: 60px 0 60px;
	background: url("../images/pricing-bg.webp");
	background-size: cover;
	background-position: bottom center;
}

.sec-segaki .main-name {
    color: var(--color-gold);
    font-size: 36px;
	line-height: 1.2em;
}


@media (max-width: 1199px) {
    .sec-segaki .main-name {
    font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
}
}

@media (max-width: 480px) {
    .sec-segaki .main-name {
font-size: clamp(1.625rem, 1.125rem + 2.5vw, 1.875rem)
}
}

/* =========================================
   お問い合わせ・CTAセクション
========================================= */
.sec-cta {
    width: 100%;
    padding: 60px 0 100px;
    background-color: #ffffff;
}

.cta-inner {
    max-width: var(--width-pc);
    margin: 0 auto;
    padding: 0 20px;
}

/* ご案内状風のカードデザイン */
.cta-box {
    background-color: #FDFBF6; /* 品のある薄いベージュ */
    border: 1px solid #EAE3D4; /* 枠線を少し入れて引き締める */
    border-radius: 20px;
    padding: 70px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* ふんわりとした影 */
}


/* 電話番号エリア（一番目立たせる） */
.cta-tel-wrap {
    margin-bottom: 60px;
}
.tel-label {
    font-size: 24px;
    color: var(--color-gold); /* 既存のゴールド色を使用 */
    font-weight: 500;
	border:1px solid;
	border-radius: 50px;
	display: inline-block;
	padding: 0.25em 1em;
}

@media (max-width: 480px) {
.tel-label {
   line-height: 1.5em;
}
}

.tel-number {
    display: inline-block;
    font-size: clamp(36px, 6vw, 56px);
    font-family: var(--font-serif); /* 明朝体で品格を */
    font-weight: 500;
    color: var(--color-main);
    letter-spacing: 0.05em;
    text-decoration: none;
    line-height: 1.2;
    transition: 0.3s;
}
@media (max-width: 399px) {

.tel-number {
     font-size: clamp(1.75rem, 0.011rem + 8.7vw, 2.125rem);
}
}

.tel-icon {
    font-size: 0.8em;
    margin-right: 10px;
    vertical-align: middle;
}
.tel-time {
    font-size: 18px;
    margin-top: 10px;
}

/* PC表示：電話番号ホバー時の効果（PCのみ少し色を変える等） */
@media (min-width: 980px) {
    .tel-number:hover {
        opacity: 0.7;
    }
}

/* LINEとWebフォームのボタンエリア（Flexboxで横並び） */
.cta-btn-wrap {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.btn-box {
    width: 100%;
    max-width: 420px; /* ボタンが大きくなりすぎないように制限 */
}

/* 共通のボタンデザイン */
.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 30px;
    border-radius: 50px; /* 角丸ボタンで親しみやすさを */
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.cta-btn:hover {
    transform: translateY(-3px); /* マウスカーソルを乗せると少し浮くアニメーション */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.btn-icon {
    font-weight: bold;
    margin-right: 10px;
    font-size: 1.2em;
}

/* LINEボタン専用の色 */
.btn-line {
    background-color: #06C755; /* 公式LINEグリーン */
    color: #ffffff;
}
/* Webボタン専用の色（既存のブルーを使用） */
.btn-web {
    background-color: var(--color-blue);
    color: #ffffff;
}

/* ボタン下のマイクロコピー */
.btn-note {
    font-size: 16px;
    margin-top: 1em;
}

/* =========================================
   レスポンシブ対応（スマホ）
========================================= */
@media (max-width: 980px) {
    .cta-box {
        padding: 40px 20px;
    }
    
    .cta-btn-wrap {
        flex-direction: column; /* スマホでは縦並びに変更 */
        align-items: center;
        gap: 25px;
    }
    
    .cta-btn {
        padding: 18px 20px; /* スマホでは少し高さを抑える */
    }
    
    .tel-number {
        pointer-events: auto; /* スマホでは確実にタップ発信できるように */
    }
}

@media (max-width: 399px) {
 .cta-box {
        padding: 30px 10px;
    }
}

/* =========================================
   お客様の声 セクション
========================================= */
.sec-voice {
    width: 100%;
    padding: 100px 0;
    background-color: #ffffff;
}

.voice-inner {
    max-width: var(--width-pc);
    margin: 0 auto;
    /* SPの横スクロールを画面端まで見せるため、ここのpaddingはPCのみにする */
    padding: 0 20px; 
}

/* タイトル */
.voice-title-wrap {
    text-align: center;
    margin-bottom: 40px;
}
.voice-main-title {
     font-size: clamp(1.875rem, 1.725rem + 0.75vw, 2.625rem);
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* -----------------------------
   一覧レイアウト（PC）
----------------------------- */
.voice-list-wrap {
    margin-bottom: 50px;
}
.voice-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2カラム */
    gap: 40px;
    list-style: none;
}

/* カードのデザイン（.cta-box風） */
.voice-item.cta-box-style {
    background-color: #FDFBF6; /* 品のある薄いベージュ */
    border: 1px solid #EAE3D4;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

/* タイトル・本文・メタ情報 */
.voice-item-title {
    font-size: clamp(18px, 2vw, 22px);
    color: var(--color-gold); /* アクセントにゴールド */
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.5;
}
.voice-item-content {
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.8;
    color: var(--color-main);
    margin-bottom: 30px;
    flex-grow: 1; /* 高さが違う場合でもメタ情報を下に押しやる */
}
.voice-item-meta {
    border-top: 1px dashed #D6CDB8; /* 区切り線 */
    padding-top: 20px;
    font-size: 14px;
    color: #555;
    display: flex; /* 要素を横並びにする */
    align-items: center; /* 縦位置を中央に揃える */
}
/* 左端：ご契約プラン */
.meta-plan {
    font-size: 13px;
    background-color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #EAE3D4;
    margin: 0; /* デフォルトの余白をリセット */
}

/* 右端：居住地・氏名 */
.meta-profile {
    font-weight: 500;
    margin: 0; 
    margin-left: auto; /* フレックスボックス内で右端にピタッと寄せる魔法のコード */
    text-align: right;
}
.meta-residence {
    margin-right: 15px;
}


/* ボタンの中央寄せ用 */
.btn-box-center {
    max-width: 400px;
    margin: 0 auto;
}

.pagenavi-wrap {
    padding: 0 20px;
    clear: both; /* 回り込み解除（念のため） */
}
/* -----------------------------
   レスポンシブ対応（スマホ横スクロール）
----------------------------- */
@media (max-width: 980px) {
    /* インナーの左右余白を消し、画面端までスクロールさせる */
    .voice-inner {
        padding: 0; 
    }
    .voice-title-wrap,
    .voice-btn-wrap {
        padding: 0 20px; /* タイトルとボタンには余白を戻す */
    }

    /* 横スクロールの設定 */
    .voice-list-wrap {
        overflow-x: auto; /* 横スクロールを有効化 */
        scroll-snap-type: x mandatory; /* スワイプ時にピタッと止まるように */
        -webkit-overflow-scrolling: touch; /* iOSの滑らかなスクロール */
        padding: 10px 20px 30px; /* スクロール領域の余白と影の切れ防止 */
        /* スクロールバーを隠す（デザインをスッキリさせるため） */
        scrollbar-width: none; 
		margin-bottom: 20px;
    }
    .voice-list-wrap::-webkit-scrollbar {
        display: none;
    }

    .voice-list {
        display: flex; /* グリッドを解除し横並びに */
        gap: 20px;
    }

    /* スマホ時のカード幅設定 */
    .voice-item.cta-box-style {
        width: 85vw; /* 画面幅の85%にして、次のカードの端を少し見せる */
        flex-shrink: 0; /* 縮まないようにする */
        scroll-snap-align: center; /* スクロール時にカードを中央にピタッと合わせる */
        padding: 30px 20px;
    }
	
	.voice-item-meta {
        font-size: 14px;
    }
    .meta-plan {
        font-size: 12px;
        padding: 3px 10px;
    }
    .meta-residence {
        margin-right: 8px; /* スマホでは少し間隔を詰める */
    }
}



/* =========================================
   ご住職からのごあいさつ・お寺紹介セクション
========================================= */
.sec-greeting {
    width: 100%;
    padding: 100px 0 0;
    background-color: #FDFBF6; /* 優しいベージュ背景で包み込む */
}

.greeting-inner {
    max-width: var(--width-pc);
    margin: 0 auto;
    padding: 0 20px;
}

/* -----------------------------
   住職よりごあいさつ
----------------------------- */
.greeting-box {
    margin-bottom: 80px;
    background-color: #ffffff;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.greeting-title {
    text-align: center;
    font-size: clamp(1.875rem, 1.725rem + 0.75vw, 2.625rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
    color: var(--color-main);
}

.greeting-flex {
    display: flex;
    align-items: center;
    gap: 60px;
}

.greeting-img {
    width: 35%;
    border-radius: 15px;
    overflow: hidden;
}
.greeting-img img {
    width: 100%;
    height: auto;
    display: block;
}

.greeting-text {
    width: 65%;
}

.greeting-lead {
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 500;
    color: var(--color-gold);
    margin-bottom: 25px;
}

.greeting-text p {
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 2;
    color: var(--color-main);
}

/* 署名部分 */
.greeting-sign {
    margin-top: 40px;
    text-align: right;
    border-top: 1px solid #EAE3D4;
    padding-top: 20px;
}

.priest-title {
    font-size: 18px;
    margin-right: 10px;
}
.priest-name2 {
    font-size: clamp(22px, 3vw, 28px);
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: 0.2em;
}

/* -----------------------------
   お寺の基本情報
----------------------------- */
.temple-info-box {
    max-width: 900px;
    margin: 0 auto;
}

.temple-info-flex {
    display: flex;
    align-items: center;
    gap: 50px;
}

.temple-info-text {
    width: 50%;
}

.temple-info-title {
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 500;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-gold);
}

.info-dl {
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(14px, 1.8vw, 15px);
    line-height: 1.8;
}
.info-dl dt {
    width: 25%;
    font-weight: 500;
    padding: 15px 0;
    border-bottom: 1px dashed #ccc;
    color: var(--color-gold);
}
.info-dl dd {
    width: 75%;
    padding: 15px 0;
    border-bottom: 1px dashed #ccc;
    margin: 0;
}

.temple-info-img {
    width: 50%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.temple-info-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------
   公式ホームページへのリンクボタン
----------------------------- */
.temple-link-wrap {
    margin-top: 35px;
    text-align: center;
}

.btn-temple-link {
    display: inline-block;
    padding: 16px 40px;
    background-color: #ffffff;
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    font-size: clamp(14px, 1.8vw, 15px);
    font-weight: 500;
    text-decoration: none;
    border-radius: 40px;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.btn-temple-link:hover {
    background-color: var(--color-gold);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(200, 169, 81, 0.3);
    transform: translateY(-2px);
}

/* -----------------------------
   レスポンシブ対応（スマホ）
----------------------------- */
@media (max-width: 980px) {
    .greeting-box {
        padding: 40px 20px;
    }
    
    .greeting-flex,
    .temple-info-flex {
        flex-direction: column;
        gap: 30px;
    }
    
    .greeting-img {
        width: 80%;
        margin: 0 auto;
    }
    
    .greeting-text,
    .temple-info-text,
    .temple-info-img {
        width: 100%;
    }
    
    .info-dl dt {
        width: 30%;
    }
    .info-dl dd {
        width: 70%;
    }
    
    .temple-link-wrap {
        margin-top: 25px;
    }
    .btn-temple-link {
        width: 100%;
        padding: 15px 20px;
    }
}



.faq-inner{
max-width: var(--width-pc);
    margin: 0 auto;
    padding: 0 20px;
}

/* アコーディオン全体（カテゴリごとのまとまり） */
.accordion_list {
  margin-bottom: 40px;
}

/* ------------------------------
  質問（Q）のスタイル : dt
------------------------------ */
.accordion_title {
  background: #eaeaea;
  cursor: pointer;
  padding: 20px 50px 20px 65px; /* 左はQマーク用、右は矢印用に余白確保 */
  position: relative;
  margin-bottom: 10px; /* 閉じている時の次の質問との間隔 */
  line-height: 1.5;
  border-radius: 4px; /* 少し角丸にして柔らかい印象に */
  transition: background 0.3s ease;
}

/* ホバー時のアクション */
.accordion_title:hover {
  background: #e0e0e0;
}

/* 開いた状態の時は下の角丸と余白を消してAと繋げる */
.accordion_title.open {
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}

/* Qマーク（左側） */
.accordion_title::before {
  position: absolute;
  content: 'Q';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 110%;
  font-weight: bold;
  border-radius: 50%;
  color: white;
  background: #663300; /* 寺院らしい落ち着いた茶色 */
  left: 12px;
  top: 50%;
  transform: translateY(-50%); /* テキストが複数行になっても常に上下中央 */
  z-index: 3;
}

/* 開閉矢印（右側） */
.accordion_title::after {
  position: absolute;
  content: '';
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: translateY(-50%) rotate(135deg); /* 上下中央 ＋ 下向き */
  transition: all .3s ease-in-out;
  margin-top: -2px;
}

/* 開いた状態の矢印（上向き） */
.accordion_title.open::after {
  transform: translateY(-50%) rotate(-45deg);
  margin-top: 2px;
}

/* ------------------------------
  回答（A）のスタイル : dd
------------------------------ */
.accordion_text {
  display: none; /* 初期状態は非表示 */
  padding: 25px 20px 30px 65px; /* 左側はAマーク用に空ける */
  line-height: 1.8;
  background: #f9f9f9; /* Qより少し明るい色にして階層を表現 */
  margin-bottom: 10px; /* 次の質問との間隔 */
  position: relative;
  border-radius: 0 0 4px 4px; /* 下部だけ角丸 */
}

/* Aマーク（左側に追加） */
.accordion_text::before {
  position: absolute;
  content: 'A';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #663300;
  background: #fff;
  border: 2px solid #663300; /* Qと反転させたデザイン */
  left: 12px;
  top: 20px; /* Aは長文になることが多いので、上下中央ではなく上揃え */
}

/* スマホ表示の微調整（必要に応じて） */
@media screen and (max-width: 700px) {
  .accordion_title {
 
    padding: 15px 45px 15px 55px;
  }
  .accordion_text {
    padding: 20px 15px 25px 55px;
    font-size: 95%;
  }
  .accordion_title::before,
  .accordion_text::before {
    width: 34px;
    height: 34px;
    left: 10px;
    font-size: 100%;
  }
  .accordion_title::after {
    right: 15px;
  }
}




/* ------------------------------
  footer タブレット・スマホCTAセクション
------------------------------ */
.tab-sp-navi {
  display: none;
}

@media screen and (max-width: 1199px) {
  .tab-sp-navi {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 150%);
    -webkit-transform: translate(-50%, 150%);
    width: 95%;
    max-width: 480px;
    min-width: 290px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    z-index: 800;
    background: rgba(255,255,255,0.60);
    border-radius: 10px;
    font-size: 12px;
    transition: transform 0.3s ease-in-out;
  }

  .tab-sp-navi.is-visible {
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    
    /* ▼【追加】現れる時のスピードはゆっくりにする（1.0秒） */
    transition: transform 1.0s ease-in-out;
  }

  /* JavaScriptで付与される表示用クラス */
  .tab-sp-navi.is-visible {
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
  }

  .tab-sp-navi li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
    text-align: center;
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    line-height: 1.1em;
    border: 1px solid var(--color-gold);
  }

  /* 丸ボタン共通 */
  .circle-btn {
    width: 22%;
    background-color: #fff;
    border-radius: 10px;
  }

  .circle-btn a {
    display: flex;
    flex-direction: column; /* アイコンとテキストを縦並びに */
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    width: 100%;
  }

  /* Font Awesomeアイコンのスタイル */
  .circle-btn a i {
    font-size: 24px;
    margin-bottom: 5px;
    color: var(--base-color, #333);
  }

  /* LINEボタンのアイコン色 */
  .line-btn a i {
    color: #06C755;
  }

  .circle-btn:hover {
    background-color: purple; 
    border: 2px solid #fff;
    transform: translateY(-2px); /* 浮き上がる挙動に修正 */
  }

  .circle-btn:hover i,
  .circle-btn:hover p {
    color: #fff;
  }

  /* 四角ボタン（電話） */
  .rect-btn {
    width: 51%;
    background-color: red; /* 報恩廟のテーマカラーに合わせて適宜変更してください */
    border-radius: 10px;
  }

  .rect-btn a {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    width: 100%;
  }

  .rect-btn a .rect-btn-tel {
    font-size: 18px;
    margin: 0;
  }

  .rect-btn a i {
   font-size: 21px;
    display: block;
  }

  .rect-btn:hover {
    background-color: darkred;
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  }
}

@media screen and (max-width: 480px) {
  .tab-sp-navi li {
    font-size: 10px;
  }
  .rect-btn a .rect-btn-tel {
     font-size: clamp(0.625rem, -0.125rem + 3.75vw, 1rem);
  }
  .rect-btn a i {
    font-size: clamp(1.2rem, 0.446rem + 4vw, 1.5rem);
  }
  .circle-btn a i {
    font-size: 20px;
  }
}

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

    .circle-btn {
        width: 25%;
        border-radius: 10px;
    }

 .rect-btn {
    width: 40%;
  }

  .tab-sp-navi li {
    padding: 10px 5px;
  }
  .rect-btn a {
  flex-direction: column;
  }
}




/* =========================================
  フッター
========================================= */
.site-footer {
  background-color: #f0f0f0;
  text-align: center;
   margin-top: auto;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ナビゲーション */
.footer-nav {
  margin-bottom: 40px;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  /* gap: 24-80px */
  gap: clamp(24px, 6.36vw + 3.64px, 80px);
}

.footer-nav a {
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

.footer-nav a:hover {
  opacity: 0.7;
}

/* タイトルエリア */
.footer-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.36vw + 7.64px, 24px);
  margin-bottom: clamp(30px, 1.14vw + 26.36px, 40px);
}

.footer-title .footer-subtitle {
  /* font-size: 18-24px */
  font-size: clamp(18px, 0.68vw + 15.82px, 24px);
  letter-spacing: 0.1em;
  padding-top: 10px;
}

.footer-title .footer-main-title {
  /* font-size: 32-46px */
  font-size: clamp(32px, 1.59vw + 26.91px, 46px);
  letter-spacing: 0.15em;
  line-height: 1em;
}

.footer-title .footer-main-title-ruby {
  line-height: 1em;
  font-size: 12px;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 0.25em;
  text-align: center;
}



/* ロゴエリア */
.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.footer-logo .logo-mark {
  /* width: 40-50px */
  width: clamp(40px, 1.14vw + 36.36px, 50px);
  height: auto;
}

.footer-logo .footer-logo-text {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo .footer-temple-sect {
  /* font-size: 14-18px */
  font-size: clamp(14px, 0.45vw + 12.55px, 18px);
  letter-spacing: 0.05em;
}

.footer-logo .footer-temple-name {
  /* font-size: 24-36px */
  font-size: clamp(24px, 1.36vw + 19.64px, 36px);
  letter-spacing: 0.1em;
}

/* キャッチフレーズ */
.footer-catchphrase {
  margin-bottom: 20px;
}

.footer-catchphrase img {
  /* width: 130-160px */
  width: 160px;
  margin: 0 auto;
  height: auto;
}

/* 住所・コピーライト */
.footer-inner address {
  font-size: 16px;
  padding-bottom: 20px;
}

.copyright {
display: block;
background: #FFFFFF;
padding: 0.25em 1em;
  font-size: 12px;
  letter-spacing: 0.05em;
}


/* =========================================
   レスポンシブ対応（構造・レイアウトの変更のみ）
========================================= */

/* スマホ・タブレット時のみ余白を作る */
@media screen and (max-width: 1199px) {
  .copyright {
  display: block;
    padding-bottom: 110px; 
  }
}

@media screen and (max-width: 700px) {
  /* メニューを縦列センタリング */
  .footer-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 24px; /* 縦並び時は固定値にリセット */
  }
  
  .footer-nav {
    margin-bottom: 80px;
}
  
}

/* --- 480px以下 (スマホ) --- */
@media screen and (max-width: 480px) {
  /* 永代供養墓 と 報恩廟 を縦並びに */
  .footer-title {
    align-items: center;
  }
  

}