/*
  豊中市地域ページ A案テーマ
  正本の area-page.css は変更せず、豊中市ページの body クラス内だけで色を上書きします。
  レイアウト、サイズ、余白、CTA、機能は変更しません。
*/
body.area-theme-toyonaka {
  /* 明るめのセージグリーンへ調整。
     濃さを抑えつつ、白背景でも地域色が消えない範囲に留めています。 */
  --area-accent: #9BB9A6;
  --area-accent-rgb: 155, 185, 166;
  --area-accent-deep: #668371;
  --area-soft: #E8F1EB;
  --area-pale: #F5F9F6;
  --area-footer-mid: #EEF5F0;
  --area-footer-end: #E1ECE4;
}

/* ヒーロー：市名下線 */
body.area-theme-toyonaka .pc-city-underline,
body.area-theme-toyonaka .sp-city-underline {
  background: linear-gradient(
    90deg,
    rgba(var(--area-accent-rgb), .58),
    rgba(var(--area-accent-rgb), .86),
    rgba(var(--area-accent-rgb), .56)
  ) !important;
  box-shadow: 0 8px 18px rgba(var(--area-accent-rgb), .14) !important;
}

/* ヒーローバッジ前の丸 */
body.area-theme-toyonaka .pc-feature::before,
body.area-theme-toyonaka .sp-mini-badge::before {
  background: rgba(var(--area-accent-rgb), .94) !important;
  box-shadow: 0 0 0 3px rgba(var(--area-accent-rgb), .18) !important;
}

/* AREA FEE 左上の淡い装飾 */
body.area-theme-toyonaka .area-fee-card::before {
  background: rgba(var(--area-accent-rgb), .24) !important;
}

/* AREA FEE 無料バッジ */
body.area-theme-toyonaka .area-fee-badge {
  background: linear-gradient(145deg, var(--area-soft) 0%, #ffffff 57%, #faf1df 100%) !important;
  box-shadow:
    0 18px 36px rgba(var(--area-accent-rgb), .17),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  color: #2b4b65 !important;
}

/* 墓地紹介 02〜05の番号（大型メインカードの白い番号は正本どおり維持） */
body.area-theme-toyonaka .cemetery-mini-card .cemetery-num {
  background: var(--area-soft) !important;
  color: var(--area-accent-deep) !important;
}

/* 料金目安下の案内カード：背景グラデーションと左の丸 */
body.area-theme-toyonaka .area-price-note {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.72) 30%, transparent 57%),
    radial-gradient(circle at 92% 112%, rgba(var(--area-accent-rgb), .14) 0%, rgba(var(--area-accent-rgb), .055) 31%, transparent 59%),
    linear-gradient(180deg, #ffffff 0%, #fffdfc 50%, var(--area-pale) 100%) !important;
  border-color: rgba(var(--area-accent-rgb), .25) !important;
}
body.area-theme-toyonaka .area-price-note::before {
  background:
    radial-gradient(circle at 34% 34%, rgba(255,255,255,.94) 0 24%, rgba(255,255,255,0) 25%),
    linear-gradient(145deg, var(--area-soft) 0%, var(--area-accent) 100%) !important;
  box-shadow: 0 0 0 6px rgba(var(--area-accent-rgb), .18) !important;
}
@media (min-width:768px) {
  body.area-theme-toyonaka .area-price-note::before {
    box-shadow: 0 0 0 3px rgba(var(--area-accent-rgb), .20) !important;
  }
}
@media (max-width:767px) {
  body.area-theme-toyonaka .area-price-note::before {
    box-shadow: 0 0 0 5px rgba(var(--area-accent-rgb), .20) !important;
  }
  /* スマホ：墓地紹介下の案内カード */
  body.area-theme-toyonaka .area-cemetery-extra-note-a {
    background:
      radial-gradient(circle at 14% 0%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.76) 30%, transparent 56%),
      radial-gradient(circle at 92% 112%, rgba(var(--area-accent-rgb), .13) 0%, rgba(var(--area-accent-rgb), .05) 30%, transparent 58%),
      linear-gradient(180deg, #ffffff 0%, #fffdfd 57%, var(--area-pale) 100%) !important;
  }
}

/* FAQ Q丸 */
body.area-theme-toyonaka .area-faq summary::before {
  background: var(--area-soft) !important;
  color: var(--area-accent-deep) !important;
}

/* AREA FEE：スマホのみ「無料／豊中市エリア」バッジを少し下げる
   サイズ・文字・色は変更せず、absolute配置のbottom値だけを調整。 */
@media (max-width: 767px) {
  body.area-theme-toyonaka .area-fee-badge {
    bottom: 10px !important;
  }
  body.area-theme-toyonaka .area-fee-card::after {
    bottom: -9px !important;
  }
}

/* 地域ページ最下部のグラデーション
   尼崎市ページと同じ濃度・かけ方へ合わせ、色だけ豊中市A案に置換。 */
body.area-theme-toyonaka .yui-area-site-footer {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.76) 0%, rgba(255,255,255,.36) 24%, transparent 46%),
    radial-gradient(circle at 88% 108%, rgba(var(--area-accent-rgb), .16) 0%, rgba(var(--area-accent-rgb), .07) 24%, transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f6faf7 52%, var(--area-footer-end) 100%) !important;
  border-top-color: rgba(var(--area-accent-rgb), .14) !important;
}


/* =========================================================
   Toyonaka cemetery section final adjustment v4
   Scope: Toyonaka page only.
   Goal:
   - PC: remove empty bottom space from 02-05 cards.
   - PC: keep 01 aligned to the total height of the right-side cards, but make it wider and less portrait-like.
   - SP: keep approved one-column 02-05 card layout.
   ========================================================= */

body.area-page--toyonaka .area-cemetery-wrap {
  width: min(1500px, calc(100% - 32px)) !important;
}

body.area-page--toyonaka .cemetery-final-layout {
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.area-page--toyonaka .cemetery-showcase-grid {
  width: 100% !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 22px !important;
  align-items: stretch !important;
}

body.area-page--toyonaka .cemetery-main-card {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

body.area-page--toyonaka .cemetery-main-card > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 58% center !important;
  transform: none !important;
}

body.area-page--toyonaka .cemetery-main-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg,
      rgba(10,22,35,.64) 0%,
      rgba(10,22,35,.40) 19%,
      rgba(10,22,35,.14) 40%,
      rgba(10,22,35,0) 62%),
    linear-gradient(180deg,
      rgba(10,22,35,0) 73%,
      rgba(10,22,35,.035) 100%) !important;
}

body.area-page--toyonaka .cemetery-main-content {
  position: absolute !important;
  z-index: 2 !important;
  top: 22px !important;
  bottom: auto !important;
  left: 24px !important;
  right: 24px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  transform: none !important;
}

body.area-page--toyonaka .cemetery-main-content .cemetery-title-row {
  margin-bottom: 12px !important;
}

body.area-page--toyonaka .cemetery-main-content p {
  max-width: 100% !important;
  margin-top: 0 !important;
  line-height: 1.92 !important;
}

/* PC: 02-05 cardsは各行で高さを揃え、白い本文欄の高さ差をなくす。 */
body.area-page--toyonaka .cemetery-mini-card {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

body.area-page--toyonaka .cemetery-mini-photo {
  height: auto !important;
  flex: 0 0 auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

body.area-page--toyonaka .cemetery-mini-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

body.area-page--toyonaka .cemetery-mini-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 12px 18px 16px !important;
}

body.area-page--toyonaka .cemetery-mini-body .cemetery-title-row {
  margin-bottom: 4px !important;
}

body.area-page--toyonaka .cemetery-mini-body p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 13px !important;
  line-height: 1.68 !important;
  letter-spacing: .02em !important;
}

/* Smartphone: 01 full-width overlay; 02-05 full-width stacked cards. */
@media (max-width: 767px) {
  body.area-page--toyonaka .area-cemetery-wrap {
    width: min(100% - 28px, 520px) !important;
  }

  body.area-page--toyonaka .cemetery-showcase-grid {
    max-width: 520px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  body.area-page--toyonaka .cemetery-main-card {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1.08 !important;
    display: block !important;
  }

  body.area-page--toyonaka .cemetery-main-card > img {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    object-position: 60% center !important;
  }

  body.area-page--toyonaka .cemetery-main-shade {
    background:
      linear-gradient(180deg,
        rgba(10,22,35,.60) 0%,
        rgba(10,22,35,.36) 20%,
        rgba(10,22,35,.11) 40%,
        rgba(10,22,35,0) 60%),
      linear-gradient(180deg,
        rgba(10,22,35,0) 74%,
        rgba(10,22,35,.03) 100%) !important;
  }

  body.area-page--toyonaka .cemetery-main-content {
    top: 18px !important;
    left: 18px !important;
    right: 18px !important;
    bottom: auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.area-page--toyonaka .cemetery-main-content p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.78 !important;
  }

  body.area-page--toyonaka .cemetery-mini-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  body.area-page--toyonaka .cemetery-mini-photo {
    height: auto !important;
    flex: 0 0 auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  body.area-page--toyonaka .cemetery-mini-body {
    flex: 0 0 auto !important;
    padding: 15px 16px 18px !important;
  }

  body.area-page--toyonaka .cemetery-mini-body .cemetery-title-row {
    margin-bottom: 8px !important;
  }

  body.area-page--toyonaka .cemetery-mini-body p {
    font-size: 13px !important;
    line-height: 1.76 !important;
  }
}



/* Toyonaka mobile area-fee decoration lightening v1
   スマホ版のAREA FEE左上装飾だけを少し淡くする。PC版は変更しない。 */
@media (max-width: 767px) {
  body.area-theme-toyonaka .area-fee-card::before {
    background: rgba(var(--area-accent-rgb), .15) !important;
  }
}


/* Toyonaka PC flow step04 title alignment v2
   ご依頼の流れ04のみ、番号と見出しだけを少し下げる。
   金線・本文・スマホ表示・他ステップには影響させない。 */
@media (min-width: 768px) {
  body.area-page--toyonaka .flow-card[data-step="04"] .flow-title-row {
    transform: translateY(9px) !important;
  }
}


/* =========================================================
   豊中市ヒーロー確認版 v1
   - PC：円形花壇が波形の右側で見やすい位置になるよう、焦点を少し右へ
   - SP：スマホ用トリミング画像を中央配置
   - 墓地紹介は次工程のため、一時的な案内カードを表示
   ========================================================= */
@media (min-width: 981px) {
  body.area-page--toyonaka .pc-photo-layer img {
    object-position: 62% 52% !important;
  }
}

@media (max-width: 980px) {
  body.area-page--toyonaka .sp-hero-shell .sp-hero-photo img {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

body.area-page--toyonaka .toyonaka-cemetery-preview {
  width: min(860px, 100%);
  margin: 12px auto 0;
  padding: 42px 48px;
  text-align: center;
  border: 1px solid rgba(var(--area-accent-rgb), .28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 32%, transparent 60%),
    linear-gradient(145deg, #ffffff 0%, var(--area-pale) 100%);
  box-shadow: 0 18px 42px rgba(var(--area-accent-rgb), .12);
}
body.area-page--toyonaka .toyonaka-cemetery-preview__label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--area-accent-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .20em;
}
body.area-page--toyonaka .toyonaka-cemetery-preview h3 {
  margin: 0;
  color: #274968;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.55;
}
body.area-page--toyonaka .toyonaka-cemetery-preview p {
  max-width: 680px;
  margin: 16px auto 0;
  color: #60788b;
  font-size: 15px;
  line-height: 2;
}
@media (max-width: 767px) {
  body.area-page--toyonaka .toyonaka-cemetery-preview {
    padding: 30px 22px;
    border-radius: 24px;
  }
  body.area-page--toyonaka .toyonaka-cemetery-preview h3 {
    font-size: 21px;
  }
  body.area-page--toyonaka .toyonaka-cemetery-preview p {
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
  }
}


/* =========================================================
   豊中市 PCヒーロー画像 横位置の直接調整
   ・PC版だけに適用
   ・画像の高さは100％固定
   ・拡大縮小なし
   ・--toyonaka-pc-image-x の数値だけで左右移動
   ========================================================= */
@media (min-width: 981px) {
  body.area-page--toyonaka .pc-photo-layer {
    --toyonaka-pc-image-x: 0px;
  }

  body.area-page--toyonaka .pc-photo-layer img {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: var(--toyonaka-pc-image-x) !important;
    right: auto !important;

    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    object-fit: initial !important;
    object-position: initial !important;
    transform: none !important;
  }
}

/* =========================================================
   豊中市 スマホヒーロー画像 下端調整
   ・画像の上端は0で固定
   ・下端だけを上へ移動
   ・PC版には影響しない
   ・数値を増やすほど画像の縦幅が短くなる
   ========================================================= */
@media (max-width: 980px) {
  body.area-page--toyonaka {
    --toyonaka-sp-image-bottom-cut: 35px;
  }

  body.area-page--toyonaka .sp-hero-shell .sp-hero-photo img {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: calc(100% - var(--toyonaka-sp-image-bottom-cut)) !important;

    min-width: 0 !important;
    max-width: none !important;

    object-fit: cover !important;
    object-position: 61% 42% !important;

    transform: none !important;
  }
}


/* =========================================================
   豊中市ヒーロー 撮影地ラベル案02（採用）
   表示：豊中の風景 / 千里川土手
   ・写真の余白を活かす編集的キャプション
   ・PC/SPで同じデザイン思想
   ========================================================= */
.toyonaka-place-label.place-label-02 {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  text-align: right;
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  text-shadow: 0 2px 12px rgba(8,34,55,.55);
}

.place-label-02::before {
  content: "";
  position: absolute;
  right: 0;
  top: -10px;
  width: 86px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92));
}

.place-label-02 .place-kicker {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  letter-spacing: .20em;
  opacity: .82;
}

.place-label-02 .place-name {
  display: block;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .12em;
}

@media (min-width: 981px) {
  .place-label-02.place-label-pc {
    right: 34px;
    bottom: 30px;
    min-width: 230px;
    padding: 12px 0 8px 34px;
    background: linear-gradient(90deg, transparent, rgba(5,39,63,.30));
  }

  .place-label-02.place-label-sp {
    display: none;
  }
}

@media (max-width: 980px) {
  .place-label-02.place-label-pc {
    display: none;
  }

  .place-label-02.place-label-sp {
    right: 18px;
    bottom: 53px;
    min-width: 175px;
    padding: 10px 0 7px 28px;
    background: linear-gradient(90deg, transparent, rgba(5,39,63,.34));
  }

  .place-label-02 .place-kicker {
    font-size: 9px;
  }

  .place-label-02 .place-name {
    font-size: 17px;
  }
}

/* =========================================================
   豊中市 墓地紹介04・05 見出し位置合わせ v3
   ・PC / タブレット横幅だけに適用
   ・05の長い墓地名は読みやすい2行のまま維持
   ・04の見出し行に同じ高さを確保し、本文開始位置を揃える
   ・スマートフォン表示は変更しない
   ========================================================= */
@media (min-width: 768px) {
  body.area-page--toyonaka .cemetery-showcase-grid > .cemetery-mini-card:nth-of-type(4) .cemetery-title-row,
  body.area-page--toyonaka .cemetery-showcase-grid > .cemetery-mini-card:nth-of-type(5) .cemetery-title-row {
    min-height: 52px !important;
    align-items: center !important;
  }
}