/* 出張系プラン（出張葬／自宅葬／ひがしひろしま聖苑）共通のコースカードUI */
.sh-eyebrow { font-family: var(--gothic); font-size: 0.74rem; letter-spacing: .14em; font-weight: 700; color: rgba(255,255,255,.85); text-transform: uppercase; }
.sh-include { background: var(--lav-2); border: 1px solid var(--line-soft); border-radius: 16px; padding: 1.2rem 1.4rem; box-shadow: var(--shadow-sm); }
.sh-include h3 { font-family: var(--mincho); font-size: 1.05rem; color: var(--purple-deep); margin-bottom: 0.2rem; }
.sh-include .en { font-family: var(--gothic); font-size: 0.7rem; letter-spacing: .12em; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.sh-chips span { font-size: 0.82rem; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.4em 0.95em; display: inline-flex; align-items: center; gap: 0.4em; }
.sh-chips span::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--gold); flex: none; }

.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
.sh-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.sh-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sh-card--featured { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-tint), var(--shadow-sm); }

.sh-head { position: relative; padding: 1.05rem 1.3rem 0.95rem; border-bottom: 1px solid var(--line-soft); }
.sh-head .cat { font-family: var(--gothic); font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; color: var(--gold-deep); }
.sh-head .nm { display: flex; align-items: baseline; gap: 0.5em; margin: 0.15rem 0 0.35rem; flex-wrap: wrap; }
.sh-head .nm b { font-family: var(--mincho); font-weight: 700; font-size: 1.85rem; color: var(--ink); line-height: 1; }
.sh-head .nm .yomi { font-family: var(--mincho); font-size: 0.92rem; color: var(--muted); }
.sh-head .sub { font-size: 0.82rem; color: var(--text); line-height: 1.65; }
.sh-only { position: absolute; top: 0; right: 0; font-size: 0.7rem; font-weight: 700; color: #fff; background: #8A7A4E; border-bottom-left-radius: 12px; padding: 0.4em 0.85em; letter-spacing: .02em; }
.sh-osusume { position: absolute; top: 0; right: 0; font-size: 0.72rem; font-weight: 700; color: var(--purple-ink); background: linear-gradient(135deg, #EFE2BC, var(--gold) 60%, var(--gold-deep)); border-bottom-left-radius: 12px; padding: 0.42em 0.95em; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }

.sh-photo { width: 100%; aspect-ratio: 16 / 8.2; object-fit: cover; display: block; background: var(--lav-3); cursor: zoom-in; }

/* 祭壇写真の拡大表示（ライトボックス） */
.sh-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(20, 14, 30, 0.86); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
.sh-lightbox.is-open { opacity: 1; pointer-events: auto; }
.sh-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.5); cursor: zoom-out; transform: scale(0.96); transition: transform 0.28s ease; }
.sh-lightbox.is-open img { transform: scale(1); }
.sh-lightbox-close { position: absolute; top: clamp(0.75rem, 3vw, 1.5rem); right: clamp(0.75rem, 3vw, 1.5rem); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }
.sh-lightbox-close:hover { background: rgba(255,255,255,0.28); }
.sh-card--ai .sh-head { background: #FBF6EE; }
.sh-card--seika .sh-head { background: #EEF4ED; }
.sh-card--shiraki .sh-head { background: #F6F1E6; }

.sh-body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.sh-price { display: flex; align-items: baseline; gap: 0.45em; flex-wrap: wrap; }
.sh-price .ml { font-size: 0.68rem; font-weight: 700; color: #fff; background: #C0392B; border-radius: 6px; padding: 0.22em 0.6em; align-self: center; }
.sh-price .big { font-family: var(--mincho); font-weight: 700; font-size: 2.1rem; color: var(--purple-deep); line-height: 1; }
.sh-price .big i { font-size: 0.5em; font-style: normal; font-weight: 700; }
.sh-price .tax { font-size: 0.76rem; color: var(--muted); }
.sh-reg { margin-top: 0.4rem; font-size: 0.8rem; color: var(--muted); }
.sh-reg s { color: var(--text); }
.sh-reg b { color: var(--gold-deep); font-weight: 700; }
.sh-spec { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.sh-spec span { font-size: 0.74rem; font-weight: 600; color: var(--purple-deep); background: var(--lav); border: 1px solid var(--line); border-radius: 7px; padding: 0.3em 0.7em; }
.sh-flower { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--line); font-size: 0.78rem; color: var(--text); line-height: 1.7; flex: 1; }
.sh-flower b { color: var(--ink); font-weight: 700; }
.sh-card .sh-cta { margin-top: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; font-weight: 700; font-size: 0.88rem; color: #fff; background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%); border-radius: 999px; padding: 0.7em 1.2em; transition: transform .2s, box-shadow .2s; }
.sh-card .sh-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.sh-venues { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.sh-venue { background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); border-top: 4px solid var(--purple); }
.sh-venue h3 { font-family: var(--mincho); font-size: 1.15rem; color: var(--ink); margin-bottom: 0.4rem; }
.sh-venue h3 a { color: var(--purple-deep); }
.sh-venue p { font-size: 0.84rem; color: var(--text); line-height: 1.8; }
.sh-venue .addr { margin-top: 0.6rem; font-size: 0.78rem; color: var(--muted); }