/* ===================================================
   文字の統一ルール typography.css（明朝体で統一）
   - 全ページで、いちばん最後に読み込む（他のCSSより後）
   - 見出し・本文ともに明朝体（Noto Serif JP）
   - 文字の大きさ・太さ・色は、下の「:root」の数字を変えると、全ページに反映される
   =================================================== */

:root {
  --font-serif: 'Noto Serif JP', serif;

  --fs-body: 16px;    /* 本文 */
  --fs-lead: 17px;    /* 導入メッセージ */
  --fs-small: 14px;   /* 補足・注意書き */
  --fs-h2: 26px;      /* セクションの見出し */
  --fs-h3: 20px;      /* 小見出し */

  --fw-body: 500;     /* 本文の太さ（上品さ重視なら400、読みやすさ重視なら500） */
  --lh-body: 2;       /* 本文の行の高さ */
  --ls-body: .06em;   /* 本文の文字の間 */
  --text-body: #3a362f;  /* 本文の色（墨色に近い濃さ） */
  --text-sub: #555555;   /* 補足の色 */
}

@media (max-width: 760px) {
  :root {
    --fs-lead: 16px;
    --fs-h2: 22px;
    --fs-h3: 18px;
  }
}

/* ---------- 基本：すべて明朝体 ---------- */
body,
button,
input,
textarea,
select {
  font-family: var(--font-serif);
}
body {
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
h1, h2, h3, h4 {
  font-family: var(--font-serif);
}

/* ---------- 本文（16px） ---------- */
.news-list > div,
.news-list p,
.intro-text p,
.feature p,
.feature-copy p,
.sec-desc p,
.notice-card ul,
.flow-list dd,
.cta-contact-box p,
.faq-list dd,
.kigon-lead-text,
.kigon-card p,
.on-site-banner p,
.on-site-body p,
.oharai-list,
.other-item p,
.cta-box p,
.sp-card p,
.sp-notice ul,
.sp-notice p,
.sp-cta-box p,
.sp-split p {
  font-family: var(--font-serif);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
}

/* アクセス欄（元のCSSが !important のため、こちらも !important） */
.info-group p,
.route-desc {
  font-size: var(--fs-body) !important;
  line-height: 1.85 !important;
  letter-spacing: var(--ls-body) !important;
  color: var(--text-body);
}
.route-heading {
  font-size: var(--fs-body) !important;
}

/* ---------- 導入メッセージ（少し大きめ） ---------- */
.horizontal-text,
.kigon-intro p,
.sp-intro p {
  font-family: var(--font-serif);
  font-weight: var(--fw-body);
  font-size: var(--fs-lead);
  line-height: 2.1;
  letter-spacing: .08em;
  color: var(--ink);
}

/* ---------- 質問（Q.）の行 ---------- */
.faq-list dt {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-body);
}

/* ---------- ボタン・ふりがななど、ほかのゴシック指定も明朝にそろえる ---------- */
.sp-back-to-top::after,
header.header .brand small,
.footer-copy {
  font-family: var(--font-serif);
}
.m-tag {
  font-weight: var(--fw-body);
}

/* ---------- 補足・注意書き（14px） ---------- */
.other-notes,
.cta-time,
.breadcrumb-area,
.sp-breadcrumb,
.on-site-header small,
.area-badge,
.text-link,
.m-tag,
.footer-nav,
.footer-contact-info,
.back-to-top {
  font-size: var(--fs-small);
}
.other-notes,
.cta-time {
  color: var(--text-sub);
}
.footer-copy {
  font-size: 12px;
}

/* ---------- 大見出し（h2 級） ---------- */
.section-title h2,
.sub-sec-title,
.horizontal-title,
.kigon-intro h2,
.sp-intro h2,
.sp-heading h2,
.feature-copy h2,
.intro-text h2,
.feature h2,
.cta-box h2,
.sp-cta-box h2 {
  font-size: var(--fs-h2);
  line-height: 1.7;
}

/* ---------- 小見出し（h3 級） ---------- */
.flow-block h3,
.faq-block h3,
.cta-contact-box h3,
.kigon-card h3,
.on-site-header h3,
.other-ceremony-box h3,
.sp-card h3,
.memorial-brand h2,
.other-item h4 {
  font-size: var(--fs-h3);
}
.sp-notice h3,
.notice-card h4 {
  font-size: 18px;
}

/* アクセス欄の見出し（元のCSSが !important のため） */
.info-group h3,
.access-title {
  font-size: var(--fs-h3) !important;
}

/* ===================================================
   カード間の隙間を、少し詰める（ファイルの最後に置く）
   - 写真のカード：8px／文字のカード：14px（スマホは少し狭く）
   =================================================== */
:root {
  --gap-photo: 8px;
  --gap-card: 14px;
}

/* 写真のカード（トップ） */
.grid-services-container,
.gallery-grid {
  gap: var(--gap-photo);
}

/* 文字のカード */
.kigon-grid,
.on-site-grid,
.other-ceremony-grid,
.sp-cards {
  gap: var(--gap-card);
}

@media (max-width: 760px) {
  :root {
    --gap-photo: 6px;
    --gap-card: 12px;
  }
}

/* ===================================================
   余白の統一（ファイルの最後に置く）
   - セクションの上下の余白を、サイト全体でそろえる
   - 左右の余白は、元のまま
   =================================================== */
:root {
  --sec-y: 88px;       /* 通常のセクション：上下の余白 */
  --sec-lead-top: 64px;  /* 導入メッセージの上 */
  --sec-lead-bottom: 40px; /* 導入メッセージの下 */
  --sec-cta: 64px;     /* お問合せ誘導の上下 */
}
@media (max-width: 760px) {
  :root {
    --sec-y: 56px;
    --sec-lead-top: 44px;
    --sec-lead-bottom: 28px;
    --sec-cta: 48px;
  }
}

/* 通常のセクション */
.section,
.about,
.feature,
.kigon-items-section,
.on-site-section,
.sp-block,
.sub-container {
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}

/* 導入メッセージ */
.kigon-intro,
.sp-intro,
.common-lead {
  padding-top: var(--sec-lead-top);
  padding-bottom: var(--sec-lead-bottom);
}

/* お問合せ誘導（茶色い帯の前） */
.cta-section,
.sp-cta {
  padding-top: var(--sec-cta);
  padding-bottom: var(--sec-cta);
  margin-bottom: 0;
}

/* 永代供養バナー（フッターの上） */
.memorial.section {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: var(--sec-y);
}

/* 葬儀ページ：各セクションの間 */
.sub-section {
  margin-bottom: var(--sec-y);
  padding-top: 0;
}
.sub-section:last-child {
  margin-bottom: 0;
}

/* ホームに戻るボタンの余白 */
.sp-home-link {
  padding-top: 56px;
  padding-bottom: 64px;
}

/* ===================================================
   電話番号のリンク・お知らせの並び
   =================================================== */
.info-group .tel a,
.footer-contact-info a,
.flow-list dd a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.info-group .tel a:hover,
.footer-contact-info a:hover,
.flow-list dd a:hover {
  color: var(--gold);
}

.news-list > div {
  align-items: baseline;
}
.news-list p {
  flex: 1;
  min-width: 0;
}
/* スマホ：日付とタグの下に、文章を横いっぱいで表示する */
@media (max-width: 760px) {
  .news-list p {
    flex: 1 1 100%;
    width: 100%;
  }
}


/* ===================================================
   修正まとめ（ヘッダー・トップの高さ・ボタン・下層ページの高さ・縦書き）
   =================================================== */

/* ---------- ① ヘッダー：スマホで、名前がはみ出さないように ---------- */
@media (max-width: 760px) {
  header.header .brand {
    gap: 8px;
    font-size: 15px;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  header.header .brand small {
    font-size: 10px;
    letter-spacing: .12em;
    white-space: nowrap;
  }
  header.header img.crest {
    width: 32px;
    height: 32px;
  }
}

/* ---------- ② トップ画像：スマホ専用画像（縦長 1:2）に合わせる ---------- */
:root {
  --hero-ratio-sp: 1 / 2;   /* スマホ用画像の縦横の比率（画像と同じにすると、切れない） */
}
.hero picture {
  display: contents;
}
.hero > img,
.hero picture > img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* ゆっくり拡大→縮小をくり返す（元は5秒ごとに元の大きさへ戻って、ぴくっと見えていた） */
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@media (max-width: 760px) {
  .hero {
    height: auto;
    aspect-ratio: var(--hero-ratio-sp);
    max-height: 100vh;
    max-height: 100svh;      /* 画面より高くなりすぎないように */
    min-height: 0;
  }
  .hero > img,
  .hero picture > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* キャッチコピーの高さ：写真の空の部分に置いて、屋根と重ならないように（数字を変えると上下に動く） */
  .hero-copy {
    top: 30%;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);   /* 空が明るい部分でも、文字が読みやすいように */
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero > img,
  .hero picture > img {
    animation: none;
  }
}

/* ---------- ③④ ボタン：形をそろえて、サイズを小さく ---------- */
.cta-tel-btn,
.cta-contact-btn,
.sp-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 4px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
}
.cta-tel-btn {
  background: #302d26;
  color: #ffffff;
}
.cta-tel-btn:hover {
  background: #4a463c;
  color: #ffffff;
}
.cta-btn-wrap,
.sp-cta-btns {
  gap: 14px;
}
.cta-contact-box .cta-tel-wrap {
  margin-top: 4px;
}
.cta-time {
  margin-top: 12px;
}

.sp-home-btn {
  display: inline-block;
  min-width: 200px;
  padding: 12px 32px;
  font-size: 15px;
}
.sp-home-link {
  padding-top: 40px;
  padding-bottom: 56px;
}

.anchor-btn-wrap a {
  padding: 12px 36px;
  font-size: 15px;
}

/* PAGE TOP ボタン（正円のまま、少し小さく） */
.sp-back-to-top {
  right: 20px;
  bottom: 20px;
  width: 64px;
  height: 64px;
}
.sp-back-to-top::before {
  margin-bottom: 4px;
  border-left-width: 7px;
  border-right-width: 7px;
  border-bottom-width: 10px;
}
.sp-back-to-top::after {
  font-size: 11px;
}

@media (max-width: 760px) {
  .cta-tel-btn,
  .cta-contact-btn,
  .sp-btn {
    width: auto;
    min-width: 230px;
    padding: 11px 24px;
    font-size: 15px;
  }
  .sp-home-btn {
    display: inline-block;
    min-width: 200px;
    padding: 11px 28px;
    font-size: 14px;
  }
  .anchor-btn-wrap {
    align-items: center;
  }
  .anchor-btn-wrap a {
    min-width: 220px;
    padding: 11px 20px;
    font-size: 14px;
  }
  .sp-back-to-top {
    right: 12px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }
  .sp-back-to-top::before {
    margin-bottom: 3px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 9px;
  }
  .sp-back-to-top::after {
    font-size: 10px;
  }
}

/* ---------- ⑤ 下層ページ：タイトル画像の高さを、少し高く ---------- */
/* パソコン：60% → 64%／スマホ：45% → 52% */
.sp-hero,
.kigon-safe-hero {
  height: 64vh;
  height: 64svh;
}
.sub-hero {
  height: 64vh;
}
body#page_funeral .sub-main-wrapper {
  margin-top: 64vh;
}
@media (max-width: 760px) {
  .sp-hero,
  .kigon-safe-hero {
    height: 52vh;
    height: 52svh;
  }
  .sub-hero {
    height: 52vh;
  }
  body#page_funeral .sub-main-wrapper {
    margin-top: 52vh;
  }
}

/* ---------- ヘッダー：タブレット・小さめのパソコン（幅1300px以下）もハンバーガーに ---------- */
/* メニューが8項目あり、幅1250px未満では、2〜4行に折り返して、ヘッダーが高くなるため（余裕を見て1300px） */
@media (max-width: 1300px) {
  header.header {
    height: 70px;
    padding: 0 22px;
  }
  .menu-toggle {
    display: block;
    border: 0;
    background: none;
    font-size: 25px;
    color: #ffffff;
    padding: 8px;
    cursor: pointer;
  }
  header.header nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: #ffffff;
    flex-direction: column;
    align-items: stretch;
    padding: 25px;
    gap: 17px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    z-index: 99;
  }
  header.header nav.open {
    display: flex;
  }
  header.header nav a:not(.nav-contact) {
    color: var(--ink);
    font-size: 15px;
    text-align: center;
  }
  header.header nav a:not(.nav-contact):hover {
    color: var(--gold);
  }
  header.header .nav-contact {
    text-align: center;
  }
}
/* タブレット：画面いっぱいではなく、右寄せの細いパネル */
@media (min-width: 761px) and (max-width: 1300px) {
  header.header nav {
    left: auto;
    width: min(380px, 100%);
  }
}

/* ---------- ご祈願ページ：スマホ専用のタイトル画像 ---------- */
@media (max-width: 760px) {
  .kigon-safe-hero {
    background-image: url('images/kigon-hero-sp.webp');
    background-position: center;
  }
}

/* ---------- アクセスページ・トップのアクセス詳細リンク ---------- */
.sp-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.9;
}
.sp-list li {
  margin: 4px 0;
}
.sp-note {
  margin: 20px 0 0;
  font-size: var(--fs-small);
  color: var(--text-sub);
  text-align: center;
}
.access-group .text-link {
  display: inline-block;
  margin-top: 18px;
}

/* ---------- 「梵音寺について」：見出しだけを縦書き（スマホ） ---------- */
/* 見出しを、本文の上に、中央に置く（本文とは重ならない）。英語の飾り文字は、右に縦向きで添える */
@media (max-width: 760px) {
  .intro-title {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 30px;
  }
  .intro-title .vertical-label {
    position: static;
    display: block;
    writing-mode: vertical-rl;
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: .22em;
  }
  .intro-title .mini-en {
    display: block;
    writing-mode: vertical-rl;
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: .3em;
  }
}


/* ===================================================
   スマホ対応・折り返しの調整（ファイルの最後に置く）
   =================================================== */

/* ---------- 途中で切りたくない「かたまり」 ---------- */
.nb {
  display: inline-block;
}

/* ---------- 日本語の折り返しを自然にする ---------- */
body {
  line-break: strict;              /* 「。」「、」「ゃ」などが行頭に来にくくなる */
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  text-wrap: balance;              /* 見出しの行の長さを均等に */
  word-break: auto-phrase;         /* 文節で改行（Chrome等。未対応ブラウザでは無視される） */
}
p,
.horizontal-text,
.sp-intro p,
.kigon-intro p {
  text-wrap: pretty;               /* 1文字だけ残る行を減らす */
}
.horizontal-text,
.sp-intro p,
.kigon-intro p,
.sec-desc p {
  word-break: auto-phrase;
}

/* ---------- 住所：字間を詰めて、かたまりごとに折り返す ---------- */
.footer-contact-info p,
.info-group .postal {
  letter-spacing: .03em !important;
  line-height: 1.9;
}

/* ---------- フッターのリンク色：どの状態でも固定 ---------- */
.footer-nav a:link,
.footer-nav a:visited {
  color: inherit;
}
.footer-nav a:hover {
  color: #b5a47e;
}

/* ---------- 固定ヘッダーにアンカー先が隠れないように ---------- */
html {
  scroll-padding-top: 80px;
}

/* ---------- 下層ページのタイトル：狭い画面で窮屈にならないように ---------- */
@media (max-width: 400px) {
  .sp-hero-content h1,
  .kigon-safe-hero-content h1,
  .sub-hero .section-title h1 {
    font-size: 21px;
    letter-spacing: .05em;
  }
  .sp-intro h2,
  .kigon-intro h2 {
    font-size: 19px;
    letter-spacing: .02em;
  }
  .horizontal-title {
    font-size: 20px;
  }
}

/* ---------- 小さいスマホ（幅360px以下・折りたたみ端末など）：ヘッダー ---------- */
@media (max-width: 360px) {
  header.header {
    padding: 0 14px;
  }
  header.header .brand {
    font-size: 13px;
    letter-spacing: .04em;
  }
  header.header .brand small {
    font-size: 9px;
    letter-spacing: .08em;
  }
  header.header img.crest {
    width: 28px;
    height: 28px;
  }
  .hero h1 {
    font-size: 18px;
    letter-spacing: .06em;
  }
  .eyebrow {
    font-size: 11px;
  }
  .footer-nav {
    font-size: 13px;
    gap: 8px 14px;
  }
}


/* ===================================================
   トップのヒーロー：文字が重ならないように調整（ファイルの最後に置く）
   =================================================== */

/* ---------- スマホ（幅760px以下） ---------- */
/* キャッチコピーを、縦書き「梵音寺」の左側の列に収める（右側を、縦書きの幅だけ空ける）。
   どんな画面幅・フォントでも、横に重ならない */
@media (max-width: 760px) {
  .hero-vertical-brush {
    top: 84px;                       /* ヘッダー（高さ70px）の下から始める */
  }
  .hero-copy {
    top: clamp(92px, 17%, 190px);    /* 上から配置（高さが変わっても、ヘッダーに潜らない） */
    transform: none;
    left: 6%;
    right: calc(5% + 68px);          /* 縦書きの幅（約55px）＋余白 */
    width: auto;
  }
  .hero h1 {
    font-size: clamp(16px, 4.9vw, 20px);
    letter-spacing: .08em;
  }
  .eyebrow {
    letter-spacing: .05em;
  }
  /* 「SCROLL」は、PAGE TOPボタンと重なるので、スマホでは隠す */
  .scroll {
    display: none;
  }
}

/* ---------- タブレット・パソコン（幅761px以上） ---------- */
@media (min-width: 761px) {
  /* 縦書きの1文字目が、ヘッダーに隠れないように（ヘッダー70pxの下から） */
  .hero-vertical-brush {
    top: max(12%, 92px);
  }
  /* 上の英字ラベル：幅が狭い画面では小さくして、縦書きと重ならないように
     （元の指定 clamp(25px,1.5vw,20px) は、常に25pxになっていた） */
  .eyebrow {
    font-size: clamp(16px, 2.2vw, 25px);
  }
}

/* ---------- お知らせ：タブレットでは1列にして、読みやすく ---------- */
@media (max-width: 960px) {
  .news {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ---------- PAGE TOPボタン：少しスクロールしたら表示する ---------- */
.sp-back-to-top {
  transition: opacity .3s, visibility .3s, transform .3s, background .3s;
}
.sp-back-to-top.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}


/* ===================================================
   電話番号：途中（ハイフンの位置）で折り返さない
   =================================================== */
a[href^="tel:"] {
  white-space: nowrap;
}

/* 葬儀までの流れ：見出しが2行になっても、番号の下に回り込まず、文字をそろえる */
.flow-list dt {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}
.flow-list dt span {
  flex: 0 0 26px;
  margin-top: 2px;
}