/* =========================================================
   スマイル供養堂 — 仏事専門LP デザインシステム
   設計意図:
   - 不用品回収業者然とした無機質マテリアル調を廃し、
     高齢のご遺族に「仏事の専門家・安心して任せられる老舗」
     という権威性と安心感を与える「格式高い和の意匠」へ。
   - 配色は仏事を連想させる厳かなトーンに統制:
       紺(こん) / 藤紫(ふじ) / 金・黄土(きん) / 深緑(みどり)
       下地は生成り(きなり)の和紙色、強調は朱(臙脂)。
   - 見出し・重要文言は明朝体で老舗感を、本文は高齢者の
     可読性を最優先しゴシックで太く大きく。
   ========================================================= */

:root {
  --washi: #FBF8F1;        /* 生成り(下地) */
  --washi-deep: #F3EDE0;   /* 一段濃い和紙 */
  --ink: #2A2520;          /* 墨色(本文) */
  --kon: #1B2A4E;          /* 紺青(見出し・帯) */
  --kon-deep: #121E38;
  --fuji: #5B4B86;         /* 藤紫(副アクセント) */
  --kin: #A67C2E;          /* 黄土・金(罫線・装飾) */
  --kin-light: #C7A867;
  --midori: #2E4D3A;       /* 深緑(副見出し) */
  --enji: #9E2B25;         /* 朱・臙脂(CTA・注意喚起) */
  --enji-deep: #7E211C;
  --line-green: #06C755;   /* LINEブランド色(認知のため不変) */
}

body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  background-color: var(--washi);
}

/* ---- 明朝体ユーティリティ(見出し・格式表現) ---- */
.font-mincho {
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-feature-settings: "palt";
}

/* ---- 背景トーン(Tailwind の bg-white / bg-lightBg を上書き) ---- */
body.bg-white { background-color: var(--washi) !important; }
.bg-white { background-color: #FFFFFF; }
.bg-lightBg { background-color: var(--washi-deep) !important; }

/* 和紙のかすかな地紋(うるさくない程度の縦縞) */
.washi-ground {
  background-color: var(--washi);
  background-image:
    linear-gradient(rgba(166, 124, 46, 0.02) 1px, transparent 1px);
  background-size: 100% 26px;
}

/* ---- セクション見出し(緑帯 → 紺地に金罫の格式帯へ) ---- */
.section-title-bg {
  background-color: var(--kon);
  color: #fff;
  text-align: center;
  padding: 1.2rem 1rem;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  margin-bottom: 2.5rem;
  position: relative;
  border-top: 3px solid var(--kin);
  border-bottom: 3px solid var(--kin);
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
}
.section-title-bg::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: var(--kin) transparent transparent transparent;
}

/* 見出し下線(border-primary を金に寄せる) */
.border-primary { border-color: var(--kin) !important; }
.text-primary { color: var(--kon) !important; }
.text-primaryDark { color: var(--midori) !important; }
.bg-primary { background-color: var(--kon) !important; }
.text-accent { color: var(--enji) !important; }

/* 旧デザインの「青の強調文字」を金茶の格式トーンへ寄せる */
.text-blue-600 { color: var(--enji) !important; }

/* 旧・黄色マーカー下線を、上品な金の細下線へ置換 */
[class*="linear-gradient(transparent"] {
  background: none !important;
  border-bottom: 3px solid var(--kin-light);
  padding-bottom: 1px;
}

/* ---- 和の飾り罫(セクション区切り) ---- */
.wa-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--kin);
  margin: 0 auto;
  max-width: 16rem;
}
.wa-divider::before,
.wa-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kin), transparent);
}

/* ---- 縦書き風の小見出しタグ ---- */
.kicker {
  display: inline-block;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  letter-spacing: 0.35em;
  color: var(--kin);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--kin-light);
  padding-bottom: 0.2rem;
  margin-bottom: 0.6rem;
}

/* ---- CTAボタン(朱・臙脂):ポップな赤からの脱却 ---- */
.btn-tel {
  background-color: var(--enji) !important;
  border: 2px solid #fff;
  box-shadow: 0 6px 0 var(--enji-deep), 0 8px 14px rgba(0, 0, 0, 0.18);
}
.btn-tel:hover { background-color: var(--enji-deep) !important; }
.btn-line {
  background-color: var(--line-green) !important;
  box-shadow: 0 6px 0 #049b43, 0 8px 14px rgba(0, 0, 0, 0.15);
}

/* CTA外枠を朱から金縁＋紺地の格式枠へ */
.cta-frame {
  border: 3px solid var(--kin);
  background: #fff;
  box-shadow: 0 10px 24px rgba(27, 42, 78, 0.12);
}
.cta-frame-header {
  background-color: var(--kon);
  color: #fff;
  border-bottom: 3px solid var(--kin);
}

/* ---- 注意喚起ブロック(点滅ポップ → 落ち着いた臙脂) ---- */
.alert-frame {
  border: 3px solid var(--enji) !important;
  background: #fff;
}
.alert-frame-header {
  background-color: var(--enji) !important;
  color: #fff;
}
/* けばけばしいアニメーションを抑制(格式重視) */
.animate-pulse, .animate-bounce { animation: none !important; }

/* ---- 画像プレースホルダー(オーナー差替用) ---- */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  background:
    repeating-linear-gradient(45deg, var(--washi-deep), var(--washi-deep) 12px, #efe7d6 12px, #efe7d6 24px);
  border: 2px dashed var(--kin);
  color: var(--midori);
  border-radius: 0.5rem;
  padding: 2rem 1rem;
  min-height: 180px;
  font-weight: 700;
}
.img-placeholder .ph-icon { font-size: 2.6rem; color: var(--kin); }
.img-placeholder .ph-spec {
  font-size: 0.8rem;
  color: #8a7a55;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- アコーディオン ---- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details {
  border-left: 4px solid var(--kin) !important;
}

/* ---- 宗派カード(既存の濃紺を踏襲しつつ金縁で格式) ---- */
.shuha-card {
  background-color: var(--kon) !important;
  border: 1px solid var(--kin);
}

/* ---- 文字フチ(視認性) ---- */
.text-outline-white {
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.95), -2px 2px 0 rgba(255, 255, 255, 0.95),
    2px -2px 0 rgba(255, 255, 255, 0.95), -2px -2px 0 rgba(255, 255, 255, 0.95),
    0 2px 0 rgba(255, 255, 255, 0.95), 0 -2px 0 rgba(255, 255, 255, 0.95),
    -2px 0 0 rgba(255, 255, 255, 0.95), 2px 0 0 rgba(255, 255, 255, 0.95);
}
@media (min-width: 768px) {
  .md-no-outline { text-shadow: none !important; }
}

/* ---- ヘッダーロゴ ---- */
/* 寺院の御朱印スタンプ調(朱印風):朱地に白の「供」＋金の二重枠 */
.brand-emblem {
  width: 2.6rem; height: 2.6rem;
  border: 1.5px solid var(--kin);
  border-radius: 0.4rem;            /* 角印=角丸スクエア */
  display: flex; align-items: center; justify-content: center;
  color: #ffffff;                   /* 白文字「供」 */
  background: var(--enji);          /* 朱(臙脂) */
  box-shadow:
    inset 0 0 0 1.5px var(--enji),
    inset 0 0 0 3px rgba(199, 168, 103, 0.85),  /* 内側の金の細線=二重枠 */
    0 1px 2px rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
@media (min-width: 640px) {
  .brand-emblem { width: 3rem; height: 3rem; }
}

/* ---- フローティングCTA(下部固定):格式トーンへ ---- */
#floating-cta .fc-tel { background-color: var(--enji); }
#floating-cta .fc-line { background-color: var(--line-green); }

/* ---- WordPress由来の不要トップボタンを非表示(pattern系流用対策) ---- */
.page-top-sp, .page-top, #page_top, .page_top_btn { display: none !important; }