/* 店舗ページ＝縦スワイプ・ストーリー
   CSS scroll-snap が主役（JS無効でも縦スワイプ＆全店到達）。story.jsは補助のみ。 */

.nomoyo-shopstory{
	scroll-snap-type:y mandatory;
	overflow-y:auto;
	height:calc(100svh - 58px);
	-webkit-overflow-scrolling:touch;
	background:#0c0a0b;
}

/* ヒーロー（全画面没入） */
.ss-hero{
	position:relative;
	min-height:calc(100svh - 58px);
	scroll-snap-align:start;
	display:flex; align-items:flex-end;
	background-size:cover; background-position:center;
	background-color:var(--ss-brand,#af0a78);
	color:#fff; overflow:hidden;
}
/* ブランド色グラデ（写真なし時の地） */
.ss-hero:not(.has-photo)::before{
	content:""; position:absolute; inset:0; z-index:0;
	background:
		radial-gradient(120% 80% at 30% 12%, rgba(255,255,255,.18), transparent 55%),
		linear-gradient(160deg, var(--ss-brand,#af0a78), #120a10 92%);
}
/* 写真時は可読性のための暗幕 */
.ss-hero.has-photo::before{
	content:""; position:absolute; inset:0; z-index:0;
	background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.82) 100%);
}
.ss-hero-in{ position:relative; z-index:2; padding:24px 22px 64px; width:100%; max-width:560px; margin:0 auto; }
.ss-eye{ display:inline-block; font-size:11px; letter-spacing:.22em; font-weight:700; background:rgba(255,255,255,.16); padding:4px 10px; border-radius:999px; }
.ss-name{ font-family:'Noto Serif JP',serif; font-weight:900; font-size:30px; line-height:1.3; margin:12px 0 0; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.ss-catch{ font-size:15px; line-height:1.7; margin:12px 0 0; color:rgba(255,255,255,.92); }
.ss-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; }
.ss-chips li{ font-size:12px; font-weight:700; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28); padding:6px 12px; border-radius:999px; }
.ss-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:22px 0 0; }
.ss-detaillink,.ss-link{ color:#fff; font-weight:700; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; padding:0 8px; border-bottom:2px solid rgba(255,255,255,.6); }
.ss-hint{ position:absolute; left:0; right:0; bottom:14px; z-index:2; text-align:center; font-size:12px; color:rgba(255,255,255,.8); animation:ssbob 1.8s ease-in-out infinite; }
@keyframes ssbob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }

/* 詳細（SEO本体＝明るい面・本文16px） */
.ss-detail{ scroll-snap-align:start; background:#f8f9fa; color:#191c1d; }
.ss-detail-in{ max-width:720px; margin:0 auto; padding:28px 20px 48px; }
.ss-detail .nomoyo-breadcrumb{ font-size:12px; margin-bottom:14px; }
.ss-body{ font-size:16px; line-height:1.8; }
.ss-body h2{ font-family:'Noto Serif JP',serif; }

/* reduce-motion */
@media (prefers-reduced-motion: reduce){ .ss-hint{ animation:none; } }

/* PC: 没入ビューは中央寄せ（PC専用テンプレは作らない） */
@media (min-width:900px){
	.nomoyo-shopstory{ max-width:520px; margin:0 auto; box-shadow:0 0 60px rgba(0,0,0,.12); }
}