/* 結心堂 コラムの追従帯（決定版 2026-11-10）：ベージュのリキッドガラス
   html に data-band="a" を付けて使う。上の行は全記事共通の文言。
   動き：はじめはロゴの段＋帯。下へ読むと画像にかかる前に上へ引っ込み、上へ戻ると帯だけ出る（スマホ・パソコン共通）。 */
.ys-head{position:sticky;top:0;z-index:60;font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic',Meiryo,sans-serif;transition:transform .35s ease,box-shadow .25s}
.ys-row{max-width:none;margin:0;padding:8px clamp(14px,4vw,40px);display:flex;align-items:center;gap:10px;min-height:52px;max-height:64px;overflow:hidden;box-sizing:border-box;background:#FFFEFA;transition:max-height .3s,min-height .3s,padding .3s,opacity .2s}
.ys-row-in{width:100%;max-width:1080px;margin:0 auto;display:flex;align-items:center}
.ys-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#2B4B65}
.ys-logo i{display:block;width:12px;height:12px;border-radius:50% 44% 52% 46%;background:#EED6AA}
.ys-logo b{font-weight:700;font-size:21px;letter-spacing:.22em;line-height:1}
.ys-band-wrap{position:relative}
.ys-band{position:relative;display:block;color:#20384B;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ys-band:focus-visible{outline:3px solid #D9B97A;outline-offset:2px}
.ys-band-in{position:relative;z-index:1;max-width:1080px;margin:0 auto;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:9px clamp(14px,4vw,40px) 10px}
.ys-mark{display:none}
.ys-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ys-msg{font-size:clamp(12.5px,3.7vw,15px);font-weight:700;letter-spacing:.02em;line-height:1.45;color:#2B4B65}
.ys-ph{display:inline-block;max-width:100%}
.ys-sub{display:flex;align-items:center;gap:6px;white-space:nowrap;line-height:1.3}
.ys-area{flex:none;font-size:clamp(9.5px,2.8vw,10.5px);font-weight:700;letter-spacing:.06em;color:#FFFEFA;background:#2B4B65;border-radius:999px;padding:2px 8px}
.ys-svc{font-size:clamp(9.5px,2.9vw,11px);font-weight:500;letter-spacing:.02em;color:#56687A;overflow:hidden;text-overflow:ellipsis}
.ys-go{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:#FFFEFA;background:#2B4B65;border-radius:52% 48% 50% 50% / 50% 54% 46% 50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 1px rgba(255,255,255,.22),0 3px 6px -2px rgba(43,75,101,.4);transition:transform .2s}
.ys-band:active .ys-go{transform:translateX(3px)}
.ys-head.is-nudge .ys-go{animation:ysNudge .9s ease-in-out 1}
@keyframes ysNudge{30%{transform:translateX(5px)}55%{transform:translateX(-1px)}75%{transform:translateX(3px)}}
@media (hover:hover){.ys-band:hover .ys-go{transform:translateX(3px)}}
@media (min-width:760px){.ys-txt{flex:0 1 auto;flex-direction:row;align-items:center;justify-content:center;gap:18px}.ys-band-in{justify-content:center}}
@media (max-width:360px){.ys-band-in{gap:8px;padding-left:12px;padding-right:12px}.ys-go{width:32px;height:32px}.ys-sub{gap:4px}.ys-area{font-size:9.5px;letter-spacing:.02em;padding:2px 6px}.ys-svc{font-size:9.5px;letter-spacing:0}}
/* 動き：はじめは全部見せる。下へ読むと上に引っ込み、上へ戻ると帯だけ出す（スマホ・パソコン共通） */
.ys-head.is-peek{transform:translateY(calc(-1 * var(--ys-row-h,0px)))}
.ys-head.is-peek .ys-row{opacity:0}
.ys-head.is-hidden{transform:translateY(calc(-100% - 18px))}

/* ───── 案A：ベージュのリキッドガラス（浮かぶ帯） ───── */
[data-band="a"] .ys-head{background:transparent}
[data-band="a"] .ys-band-wrap{padding:6px 8px 8px}
[data-band="a"] .ys-band{max-width:820px;margin:0 auto;border-radius:24px;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.04) 52%,rgba(255,255,255,.2)),rgba(246,234,210,.48);
  -webkit-backdrop-filter:blur(12px) saturate(1.7) brightness(1.03);backdrop-filter:blur(12px) saturate(1.7) brightness(1.03);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.45),inset 0 0 10px rgba(255,255,255,.22),0 12px 26px -12px rgba(43,75,101,.38),0 1px 3px rgba(43,75,101,.14)}
[data-band="a"] .ys-band::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1.3px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.25) 30%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.6) 85%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.lg-refract[data-band="a"] .ys-band[data-lg-ready]{-webkit-backdrop-filter:blur(7px) var(--lg-filter) brightness(1.03);backdrop-filter:blur(7px) var(--lg-filter) brightness(1.03)}
[data-band="a"] .ys-band-in{padding:9px 10px 9px 18px}
[data-band="a"] .ys-head.is-deep .ys-band-wrap{padding-top:8px}

.ys-knot{display:none}

@media (prefers-reduced-motion:reduce){.ys-head,.ys-head *{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  [data-band="a"] .ys-band,[data-band="b"] .ys-head{background:#FBF4E6!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ───── 共通文言（11/9 夜〜）：上の行は全記事共通。必ず1行に収める ───── */
.ys-msg{white-space:nowrap;overflow:hidden;text-overflow:clip;font-size:clamp(13px,3.75vw,15px);letter-spacing:.03em}
.ys-msg em{font-style:normal;color:#9A7434}
.ys-sub{gap:6px}
.ys-svc{letter-spacing:.01em}
.ys-svc .sl{display:inline-block;margin:0 .15em;color:#B89A62}
/* 案Aのスマホ：左右の余白と内側を少し詰めて、下の行が切れないようにする */
@media (max-width:440px){
  [data-band="a"] .ys-band-wrap{padding:6px 6px 8px}
  [data-band="a"] .ys-band-in{padding:8px 8px 8px 14px;gap:10px}
  [data-band="a"] .ys-band{border-radius:22px}
}
@media (max-width:360px){
  [data-band="a"] .ys-band-in{padding:7px 7px 7px 12px;gap:8px}
  .ys-svc .sl{margin:0 .05em}
}

/* 「お墓のコラム一覧」をロゴの段の右へ */
.ys-row-in{justify-content:space-between;gap:12px}
.ys-back{flex:none;font-size:13px;font-weight:500;letter-spacing:.04em;color:#2B4B65;text-decoration:underline;text-decoration-color:#D9B97A;text-underline-offset:4px;white-space:nowrap}
.ys-back:focus-visible{outline:3px solid #D9B97A;outline-offset:3px;border-radius:4px}
@media (max-width:360px){.ys-back{font-size:12px;letter-spacing:.02em}}