@charset "UTF-8";

		/* ========================================
		   Base Reset & Variables
		   ======================================== */
		:root {
			--accent-color: #eb2f5b;
			--bg-base: #f7f7f7;
			--text-main: #1a1a1a;
			--text-sub: #666666;
			--border-color: #eaeaea;

			--font-sans: 'Noto Sans JP', sans-serif;
			--font-serif: 'Shippori Mincho', serif;
			--font-eng: 'Playfair Display', serif;
		}

		* { box-sizing: border-box; margin: 0; padding: 0; }
		body {
			font-family: var(--font-sans);
			background-color: var(--bg-base);
			color: var(--text-main);
			line-height: 1.6;
			padding: 2rem 1.5rem 5rem;
			-webkit-font-smoothing: antialiased;
		}
		a { text-decoration: none; color: inherit; }
		img { max-width: 100%; height: auto; display: block; object-fit: cover; }

		.pattern-label {
			margin-bottom: 1rem;
			font-size: 1.1rem;
			font-weight: 700;
			color: var(--text-main);
			border-left: 4px solid var(--accent-color);
			padding-left: 10px;
		}

		.shop-list-wrap {
			max-width: 1000px;
			margin: 100px auto;
			display: flex;
			flex-direction: column;
			gap: 4rem; /* 確認用に広めにしています */
		}

		@media screen and (min-width: 300px ) and (max-width:900px) {
			.shop-list-wrap { max-width: 700px; }
		}



		/* ========================================
		   Shop Card Common
		   ======================================== */
		.shop-card {
			margin-top:30px;
			background: #ffffff;
			border-radius: 12px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.06);
			display: flex;
			flex-direction: column;
			overflow: hidden;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			position: relative;
		}

		.shop-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 15px 40px rgba(0,0,0,0.12);
		}

		@media (min-width: 900px) {
			.shop-card { flex-direction: row; align-items: stretch; }
		}

		/* ----------------------------------------
		   1. 画像エリア
		   ---------------------------------------- */
		.sc-image-area {
			position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
		}
		@media (min-width: 900px) {
			.sc-image-area { width: 280px; aspect-ratio: 3 / 4; flex-shrink: 0; }
		}
		.sc-image-area img {
			width: 100%; height: 100%; transition: transform 0.6s ease;
		}
		.shop-card:hover .sc-image-area img { transform: scale(1.05); }

		/* ----------------------------------------
		   2. 店舗情報エリア
		   ---------------------------------------- */
		.sc-info-area {
			padding: 1.5rem; flex-grow: 1;
			display: flex; flex-direction: column; justify-content: center;
		}
		.sc-shop-name {
			font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700;
			line-height: 1.3; margin-bottom: 0.5rem;
		}
		.sc-shop-catch {
			font-size: 0.9rem; color: var(--text-sub);
			margin-bottom: 1rem; line-height: 1.6;
		}
		.sc-details-list {
			list-style: none; display: flex; flex-direction: column; gap: 0.4rem;
			margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--text-main);
		}
		.sc-details-list li { display: flex; align-items: center; gap: 0.5rem; }
		.sc-details-list li::before {
			content: ''; display: block; width: 4px; height: 4px;
			background: var(--text-sub); border-radius: 50%;
		}

		/* ----------------------------------------
		   中央下段エリア (アイコン or タグ)
		   ---------------------------------------- */
		.sc-bottom-area { margin-top: auto; }

		/* パターンA: ピックアップキャスト（有料プラン用） */
		.sc-pickup-casts {
			display: flex; align-items: center; gap: -10px;
		}
		.cast-icon {
			width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff;
			overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
			margin-right: -10px;
			background: #eee;
		}
		.cast-icon img { width: 100%; height: 100%; object-fit: cover; }
		.pickup-text {
			font-size: 0.75rem; font-weight: 700; color: var(--text-sub);
			margin-left: 18px; letter-spacing: 0.05em;
		}

		/* パターンB: 決済・システムタグ（無料プラン用） */
		.sc-sys-tags {
			display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
		}
		.sys-tag {
			font-size: 0.75rem; font-weight: 500; color: var(--text-main);
			background: #f0f0f0; padding: 5px 14px; border-radius: 50px;
			display: inline-flex; align-items: center; gap: 4px;
			border: 1px solid #e0e0e0;
		}
		/* タグの色分け等が必要な場合の補助クラス */
		.sys-tag-highlight {
			background: rgba(235, 47, 91, 0.05);
			color: var(--accent-color);
			border-color: rgba(235, 47, 91, 0.2);
		}

		/* ----------------------------------------
		   3. オファーエリア (Premium Dark)
		   ---------------------------------------- */
		.sc-offer-area {
			padding: 1.5rem; background: var(--text-main); color: #ffffff;
			display: flex; flex-direction: column; justify-content: center; position: relative;
		}
		@media (min-width: 900px) {
			.sc-offer-area { width: 320px; flex-shrink: 0; }
			.sc-offer-area::before, .sc-offer-area::after {
				content: ''; position: absolute; left: -10px; width: 20px; height: 20px;
				background: var(--bg-base); border-radius: 50%; z-index: 10;
			}
			.sc-offer-area::before { top: -10px; }
			.sc-offer-area::after { bottom: -10px; }
		}

		/* オファータイトル（点滅ドット付き） */
		.offer-title {
			font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700;
			letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem;
			display: flex; align-items: center; gap: 6px; color: #d4af37;
		}
		/* 点滅する緑のランプ */
		.live-dot {
			width: 8px; height: 8px; background: #22c55e; border-radius: 50%;
			animation: blink 1.5s infinite ease-in-out;
			box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
		}
		@keyframes blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }


		/* 時間と料金 */
		.offer-time-price {
			display: flex; flex-direction: column; margin-bottom: 0.8rem;
		}

		.offer-time {
			font-family: var(--font-eng); font-size: 1.8rem; font-weight: 700;
			color: rgba(255,255,255,0.9); line-height: 1; margin-bottom: 0.2rem;
		}
		.offer-time span {
			font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; margin-left: 2px;
		}

		.offer-price-old {
			font-size: 0.85rem; text-decoration: line-through; color: rgba(255,255,255,0.4); margin-bottom: 0.2rem;
		}

		.offer-price-new {
			font-family: var(--font-eng); font-size: 2.8rem; font-weight: 700;
			line-height: 1; color: #ffffff;
		}
		.offer-price-new span {
			font-family: var(--font-sans); font-size: 1rem; font-weight: 500; margin-left: 2px;
		}

		.offer-desc {
			font-size: 0.8rem; line-height: 1.5; padding: 10px 12px; border-radius: 6px;
			background: rgba(255,255,255,0.08); color: #eeeeee;
		}