:root {
    /* 全体の共通パディング基準（縦書きタイトルと揃える） */
    --content-padding-left: 2rem;
}

/* ------------------------------
   基本リセット・初期化設定
------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Serif JP", serif;
    background: #f9f9f7;
    color: #222;
    position: relative;
}

/* ------------------------------
   汎用型
------------------------------ */
.mt-1 {
    margin-top: 1rem;
}

.mt-12 {
    margin-top: 1.2rem;
}

.mb-12 {
    margin-bottom: 1.2rem;
}

/* ==============================
   <header>（ヘッダー部分）
   - タイトル（縦書き）
   - 説明文（英語）
============================== */
/* ==============================
   <header>（ヘッダー部分）
   - タイトル（縦書き）
   - 説明文（英語）
   - 背景画像つき
============================== */
header {
    padding: 4rem var(--content-padding-left);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;

    /* ★ 背景画像を指定 */
    background-image: url("../imgs/top/odawara_kusatsu.jpg"); /* パスは環境に合わせて変更 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 画像をヘッダー全体にフィットさせてトリミング */
    /* background-size: contain; にすると画像全体が収まり、余白が出ます */
    color: #fff;
}

/* 背景画像の上にうっすらオーバーレイを敷いて文字可読性を確保（任意） */
header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25); /* 少し暗くする */
    z-index: 0;
}

/* タイトルと説明文はオーバーレイの上に表示 */
header .logo-title,
header .description {
    position: relative;
    z-index: 1;
}

/* 縦書きタイトルブロック */
.logo-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* 日本語：縦書きタイトル文字 */
.title {
    writing-mode: vertical-rl;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.1em;

    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInSlideVertical 1.8s ease-out forwards;
    animation-delay: 0.5s;
}

/* 英語：横書き説明文（右→左） */
.description {
    margin-top: 1rem;
    max-width: 200px;
    font-size: 0.85rem;
    line-height: 1.6;

    opacity: 0;
    transform: translateX(30px); /* 右から左へ */
    animation: fadeInSlideHorizontal 1.8s ease-out forwards;
    animation-delay: 0.5s; /* 同時に始まる */
}

/* 上からフェードイン */
@keyframes fadeInSlideVertical {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 右からフェードイン */
@keyframes fadeInSlideHorizontal {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==============================
   <nav>（右上の縦書きナビ）
============================== */
.vertical-nav {
    position: absolute;
    top: 2rem;
    right: 2rem;
    writing-mode: vertical-rl;
    font-size: 0.9rem;
    color: #ccc;
}

.vertical-nav ul {
    list-style: none;
}

/* ==============================
   固定ヘッダーナビゲーション
============================== */
.site-nav {
    position: fixed; /* ← ここで画面に固定しています */
    top: 1rem;
    right: 1.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background: transparent;
    display: flex;
    align-items: center;
}

/* 右上固定のハンバーガー（外枠なし） */
.menu-toggle {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1100;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0.25rem;
    margin: 0;
    cursor: pointer;
    line-height: 1;
}

@media (min-width: 1024px) {
    .menu-toggle {
        right: 3rem; /* お好みで 3rem, 4rem などに調整 */
    }
}

.menu-toggle:focus-visible {
    outline: 2px solid #14285a;
    outline-offset: 2px;
}

/* 3本線アイコン */
.menu-toggle .menu-bar {
    display: block;
    width: 26px;
    height: 2px;
    background: #ffffff; /* ★ ここを #222 → #ffffff に変更 */
    margin: 6px 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}

/* greeting より下ではハンバーガーの線を黒にする */
.site-nav.nav-dark .menu-toggle .menu-bar {
    background: #222222;
}

.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ===== すべての画面幅で：右側 70% のサイドメニュー ===== */
.site-nav .menu {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* 画面右側 70% 幅のパネルにする */
    width: 70vw;

    z-index: 1090;
    background: #ffffff;
    overflow-y: auto;

    /* 上から縦並び */
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 4rem 1.25rem 2rem;

    /* アニメーション用：右からスッと出てくるイメージ */
    opacity: 0;
    transform: translateX(20px); /* 右側から少しだけスライドイン */
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;

    /* お好みで、左側の境界に影を付ける */
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}

.site-nav .menu.is-open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
}

/* メニュー内リンクのスタイルはそのまま流用 */
.site-nav .menu a {
    position: relative;
    display: block;
    width: 100%;
    padding: 1rem 0.25rem 1.1rem; /* 下線スペース */
    text-decoration: none;
    color: #222;
    font-size: 1.1rem;
    line-height: 1.6;
}

.site-nav .menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #ddd;
}

/* 低モーション設定の配慮 */
@media (prefers-reduced-motion: reduce) {
    .menu-toggle .menu-bar {
        transition: none !important;
    }
}

/* ==============================
   <main>（コンテンツ本体）
   - .bg-image 背景画像エリア
   - .content 本文ブロック
============================== */

/* 通常時（PC・iPadなど） */
main .bg-image {
    position: relative;
    width: 100%;
    height: 80vh;
    background: url("../imgs/top/odawara_kusatsu.jpg") no-repeat center center /
        cover;
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateZ(0); /* iOSのちらつき対策 */
    will-change: background-position;
    background-color: black;
}

/* 📱 スマホ・タブレット（768px未満）の場合は高さを少し低く */
@media (max-width: 767px) {
    main .bg-image {
        height: 60vh;
    }
}

/* ==============================
   SECTION 胸中
============================== */

/* 本文を囲むセクション */
.content {
    position: relative;
    padding: 4rem var(--content-padding-left);
    background: #f9f9f7;
}

/* ==============================
   SECTION 01
============================== */

/* 縦書き本文（管轄地域の紹介など） */
.main-text {
    /* writing-mode: vertical-rl; ← 必要なら解除 */
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    line-height: 2;
    color: #333;
    max-height: 80vh;
    margin: 0; /* autoを使わず左寄せ */
    padding-right: 2rem;
    text-align: justify;
}

/* 「詳しく見る」リンク風スタイル */
.more {
    font-size: 0.9rem;
    color: #444;
    font-weight: bold;
    margin-top: 2rem;
    position: relative;
    cursor: pointer;
    display: inline-block; /* ←inline-blockにすることでmargin-topを反映  */
    text-decoration: none;
}

/* 下線アニメーション */
.more::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 1px;
    width: 0;
    background-color: #444;
    transition: width 0.4s ease;
}

.more:hover::after {
    width: 100%;
}

/* ==============================
   SECTION 02（固定画像 + お知らせ）
============================== */

/* 背景画像ブロック */
.fixed-image-section {
    width: 60%;
    height: 60vh;
    background: url("../imgs/top/main_2.jpg") no-repeat right center / cover;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 📱 スマホサイズでの高さ＆幅＆位置調整 */
@media (max-width: 767px) {
    .fixed-image-section {
        height: 30vh;
        width: 77%;
        background-position: right center;
    }
}

/* ul 初期化 */
.news-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 各お知らせ行 */
.news-list li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
    font-size: 0.95rem;
    gap: 1rem;

    /* 背景画像の幅と揃える */
    width: 60%;
    margin-left: 0;
}

/* スマホ用幅調整 */
@media (max-width: 767px) {
    .news-list li {
        width: 77%;
    }
}

/* 日付部分 */
.news-list .date {
    color: #888;
    width: 7rem;
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* タイトル部分 */
.news-list .news-title {
    flex-grow: 1;
    color: #222;
}

/* 矢印アイコン（必要に応じて） */
.news-list .arrow {
    color: #bbb;
    font-size: 0.8rem;
}

/* ==============================
   お知らせ一覧（リンク化）
   既存クラスはそのまま、<a> を行全体クリックにする
============================== */

/* li の中の a をフレックス化して横並び＋全幅クリックにする */
.news-list li > a.news-item-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 0; /* 既存の li の padding と揃える */
    text-decoration: none;
    color: inherit; /* .date/.news-title の色指定をそのまま使う */
}

/* ホバー・フォーカス時の背景 */
.news-list li > a.news-item-link:hover,
.news-list li > a.news-item-link:focus-visible {
    background-color: #f0f0ea;
}

/* ==============================
   SECTION 03（お寺めぐり）
   地域名リンク一覧
============================== */

.temple-tour {
    background-color: #fff;
    padding: 4rem var(--content-padding-left);
}

/* 地域名のグリッド一覧 */
.temple-area-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    width: 100%; /* 画面幅いっぱい使う */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.8rem 1.4rem; /* ★ 行方向の間隔を広めに（1.0rem → 1.8rem） */
}

/* 画面幅が十分広いときは 4 カラム固定 */
@media (min-width: 1200px) {
    .temple-area-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* ★ 常に4列 */
    }
}

@media (max-width: 599px) {
    .temple-area-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 各地域リンクの見た目（角丸を弱めてボタンを大きく） */
.temple-area-list a {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 縦方向中央 */
    align-items: center;

    min-height: 130px; /* ★ 少しだけ高さも増やす（120 → 130） */
    padding: 1.2rem 1.4rem;

    border-radius: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f7; /* ★ ご挨拶セクションと同じ背景色 */
    text-decoration: none;
    color: #222;
    transition: background-color 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* 日本語名称 */
.temple-area-list .area-name-ja {
    display: block;
    font-size: 1.3rem; /* 少しだけ増量 */
    font-weight: 600;
    line-height: 1.4;
}

/* 英語名称（小さく・控えめな色） */
.temple-area-list .area-name-en {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #666;
}

/* ホバー時の見た目 */
.temple-area-list a:hover,
.temple-area-list a:focus-visible {
    background-color: #f0f0ea; /* ★ 同系色で少し濃くしてホバー差分を出す */
    border-color: #14285a;
    color: #14285a;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    outline: none;
}

/* ==============================
   SECTION 04（Instagram）
============================== */

/* ここを上書きして、左右対称のパディング＋中央寄せ */
.instagram-section {
    background-color: #fff;
    padding: 4rem 2rem; /* ← .content の left だけパディングを上書き */
    text-align: center; /* 見出し・説明文を中央寄せ */
}

/* グリッド本体：3×3（既存） */
.instagram-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 720px;
    margin-inline: auto; /* ← 左右中央に配置 */
}

/* スマホでは余白調整（既存を少し修正） */
@media (max-width: 767px) {
    .instagram-grid {
        gap: 0.5rem;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 各アイテム：正方形・角丸（既存） */
.instagram-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #eee;
}

.instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.instagram-item:hover img,
.instagram-item:focus-visible img {
    transform: scale(1.05);
}

/* 「公式アカウント」の行も中央に揃える */
.instagram-more {
    margin-top: 1.5rem;
    max-width: 720px;
    margin-inline: auto; /* ← 中央寄せ */
    text-align: center;
}

.instagram-id {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.instagram-id span {
    font-weight: bold;
}

.instagram-link {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    font-size: 0.9rem;
    text-decoration: none;
    background: #d6249f;
    color: #fff;
}

.instagram-link:hover,
.instagram-link:focus-visible {
    opacity: 0.9;
    text-decoration: none;
}

/* ▼ メニュー色の切り替えを滑らかに */
.site-nav .menu a,
.site-nav .menu-bar {
    transition: color 0.6s ease, background-color 0.6s ease;
}

/* ▼ greeting セクションが見えたら nav の文字色を黒へ変更 */
.site-nav.nav-dark .menu a {
    color: #222 !important;
}

/* ハンバーガーアイコンも黒へ */
.site-nav.nav-dark .menu-bar {
    background: #222 !important;
}

/* ==============================
   SECTION 各会紹介（ダイジェスト）
============================== */

.groups-section {
    background-color: #fff;
    padding: 4rem 2rem;
}

.groups-intro {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 2rem;
}

/* 各会を横並びグリッドで表示 */
.groups-grid {
    display: grid;
    grid-template-columns: 1fr; /* デフォルトは1列（スマホ用） */
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* PC では 3 カラム固定 */
@media (min-width: 768px) {
    .groups-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.group-card {
    background-color: #f9f9f7;
    border-radius: 10px;
    border: 1px solid #e0e0dd;
    padding: 1.4rem 1.6rem;
    font-size: 0.9rem;
    line-height: 1.7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.group-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.group-desc {
    margin: 0;
}

/* 詳細ページへのボタン */
.groups-more-link {
    text-align: center;
}

.groups-detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid #14285a;
    color: #14285a;
    background-color: #ffffff;
    transition: background-color 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.groups-detail-button:hover,
.groups-detail-button:focus-visible {
    background-color: #14285a;
    color: #ffffff;
    border-color: #14285a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* スマホ向け微調整 */
@media (max-width: 767px) {
    .groups-section {
        padding: 3rem 1.5rem;
    }
}

/* カード全体をリンクにした場合の調整 */
.group-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.group-card-link:hover,
.group-card-link:focus-visible {
    text-decoration: none;
}

/* ==============================
   <footer>（フッター）
============================== */
.site-footer {
    background-color: #f9f9f7;
    padding: 2rem var(--content-padding-left);
    text-align: start;
    font-size: 0.85rem;
}

.footer-logo {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.footer-address {
    margin-bottom: 0.5rem;
}

.footer-copy {
    color: #888;
    font-size: 0.75rem;
}

.fade-up-on-scroll {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

.fade-up-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-down-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

.fade-down-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==============================
   <footer>（フッター）
   ※ バナー画像サイズは変更しない
============================== */
.site-footer {
    background-color: #f9f9f7;
    padding: 2rem var(--content-padding-left);
    text-align: start;
    font-size: 1rem; /* ベース */
}

/* 住所・電話など、通常のテキスト */
.site-footer p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

/* ★ サイト名だけ少し大きく（← .site-footer p の後に書くこと） */
.site-footer p.footer-logo {
    font-weight: bold;
    font-size: 1.2rem; /* 他より「気持ち」大きめ */
    margin-bottom: 1.5rem;
}

/* コピーライト行だけ少し控えめに */
.footer-copy {
    color: #888;
    font-size: 0.9rem;
}

/* ===== バナー関連はそのまま ===== */
.footer-banners {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.footer-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    text-decoration: none;
}

.footer-banner img {
    display: block;
    height: 80px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .footer-banners {
        justify-content: center;
    }
}

/* ===== バナー関連はそのまま（サイズ変更なし） ===== */
.footer-banners {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.footer-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    text-decoration: none;
}

.footer-banner img {
    display: block;
    height: 80px; /* ★ ここは現状維持 */
    width: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .footer-banners {
        justify-content: center;
    }
}










/* ==============================
   役員紹介ページ
   （既存クラスは変更せず、新規クラスのみ）
============================== */

/* パンくずの余白調整（寺院ページと同系統） */
.office-breadcrumb {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.office-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

.office-breadcrumb li::after {
    content: ">";
    margin: 0 0.25rem;
    color: #aaa;
}

.office-breadcrumb li:last-child::after {
    content: "";
    margin: 0;
}

.office-breadcrumb a {
    text-decoration: none;
    color: #14285a;
}

.office-breadcrumb li[aria-current="page"] {
    color: #222;
}

/* ページヘッダー（本文部分） */
.office-page-header {
    background-color: #f9f9f7;
}


.office-title {
    font-size: 1.7rem;
    margin-bottom: 1rem;
}

.office-lead {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 0.75rem;
}

/* 管轄数のサマリー */
.office-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.office-stat-item {
    padding: 0.9rem 1.2rem;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #e0e0dd;
}

.office-stat-label {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.office-stat-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #14285a;
}

/* 共通セクション見出し */
.office-section {
    background-color: #fff;
}

.office-section .office-heading {
    max-width: 720px;
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
}

/* 宗務所長挨拶 */
.office-greeting {
    max-width: 720px;
    font-size: 0.95rem;
    line-height: 1.9;
    color: #444;
}

.office-greeting p + p {
    margin-top: 1rem;
}

.office-greeting-name {
    text-align: right;
    font-weight: 600;
}

/* 役職一覧カード */
.office-role-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 960px;
}

@media (min-width: 900px) {
    .office-role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.office-role-card {
    background-color: #f9f9f7;
    border-radius: 10px;
    border: 1px solid #e0e0dd;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.office-role-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

/* dl を2列っぽく整形 */
.office-role-list {
    margin: 0;
    padding: 0;
    font-size: 1rem;      /* 0.9rem → 1rem にアップ */
    line-height: 1.9;     /* 読みやすい行間を確保 */
}

.office-role-list > div {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    margin-bottom: 0.2rem;
}

.office-role-list dt {
    color: #666;
    font-size: 1rem;
}

.office-role-list dd {
    margin: 0;
    font-size: 1rem;
}



/* 役職一覧のラッパー */
.office-roles {
    max-width: 720px;
}

/* 小見出し（「神奈川県第三部宗務所」「日蓮宗新聞」など） */
.office-subheading {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.5rem 0 0.6rem;
}

/* 最初の小見出しだけ少し上の余白を詰める */
.office-subheading:first-child {
    margin-top: 0;
}

/* 日蓮宗新聞の小見出しだけ、少しだけ余白を空けたい場合 */
.office-subheading--shinbun {
    margin-top: 2rem;
}

/* フラット表示用：カードっぽい余白は付けず、テキスト寄りに */
.office-role-list.office-role-list--flat {
    margin: 0;
}

/* dl 内の grid レイアウトは既存の .office-role-list > div をそのまま利用 */

/* ==============================
   宗務所ページ専用ヘッダー（背景画像なし）
   body.office-page が付いているページだけ適用
============================== */
body.office-page header {
    padding: 0rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;

    /* ★ 背景画像を無効化してプレーンな色に */
    background-image: none;
    background-color: #f9f9f7;
    color: #222;
}

/* トップ用の黒オーバーレイを消す */
body.office-page header::before {
    content: none;
}

/* ハンバーガー三本線は黒にしておく */
body.office-page .menu-toggle .menu-bar {
    background: #222;
}