/* =========================================================
   GRM single-store専用CSS
   ※ front.css から single-store.php で使用しているもののみ抽出
========================================================= */

/* =========================
   全体ベース
========================= */

.grm-single-store {
	max-width: 960px;
	margin: 0 auto;
	/* ▼ 上の空きは、固定ページ等のテーマ共通ルール(100px)に
	   　一度合わせたところ「空きすぎ」との指摘があったため、
	   　60pxに調整。左右・下は変更なし。 */
	padding: 60px 20px 40px;
}

/* =========================
   共通セクション
   ※ 以前は各セクションを白背景＋角丸＋影で「枠」のように
   　囲んでいたが、枠で括らないすっきりしたデザインに変更。
   　セクション間は上に細い罫線（区切り線）を引くだけにし、
   　余白で見せる構成にした。
========================= */

.grm-single-section {
	margin-bottom: 56px;
	padding: 40px 0 0;
	background: transparent;
	border-top: 1px solid #ececec;
	border-radius: 0;
	box-shadow: none;
}

/* タイトル
   ※ 見出しの下に短いアクセントカラーの下線を添えるだけの、
   　軽やかな見せ方に変更 */

.grm-single-section-title {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7b8b9a;
	margin: 0 0 24px;
	padding-bottom: 10px;
	border-bottom: 2px solid #7b8b9a;
}

/* =========================
   ヘッダー
========================= */

.grm-single-header {
	margin-bottom: 32px;
}

.grm-single-store-code {
	font-size: 12px;
	color: #888;
	margin-bottom: 6px;
}

.grm-single-title {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-bottom: 6px;
}

.grm-single-slug-en {
	font-size: 13px;
	color: #999;
	margin-bottom: 12px;
}

/* チップ */

.grm-mini-chip {
	display: inline-block;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 0;
	background: #f3f3f3;
	margin-right: 6px;
}

.grm-mini-chip-sub {
	background: #e9ecef;
}

/* =========================
   ヘッダーブロック
   （カテゴリー[エリア]→店名→ジャンル→住所→SNS/CTAアイコン）
   ※ メイン写真の上に文字を乗せず、店名の上下に順番に並べて
     表示する構成（画像あり／なし共通）
========================= */
.grm-single-header-block {
	padding: 40px 0 20px;
	text-align: left;
}

/* カテゴリー（エリア）：店名の上。一覧カードの色に合わせる */
.grm-single-header-area {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.grm-single-store-title {
	font-size: clamp(22px, 5vw, 32px);
	font-weight: 700;
	color: #111;
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin: 0 0 8px;
}

/* ジャンル：店名の下。一覧カードと同じチップ */
.grm-single-header-genre {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

/* 住所：ジャンルの下 */
.grm-single-header-address {
	font-size: 14px;
	color: #555;
	margin-bottom: 14px;
}

/* =========================
   メイン画像
========================= */

.grm-single-main-image {
	overflow: hidden;
	border-radius: 0;
}

.grm-single-main-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* =========================
   ギャラリー
========================= */

.grm-single-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	/* ▼ 不具合修正：グリッドの初期値（stretch）のままだと、各アイテムが
	   　行内の一番背の高いアイテム（キャプションが長い写真など）に
	   　合わせて引き伸ばされ、その伸びた高さいっぱいに画像側の
	   　height:100%が広がってしまい、キャプションが枠の外（overflow:
	   　hiddenで見えない範囲）に追い出されて表示されなくなっていた。
	   　items自体を引き伸ばさないようにする。 */
	align-items: start;
}

.grm-single-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

.grm-single-gallery-item img {
	width: 100%;
	/* ▼ 不具合修正：height:100%だと上記のグリッドの伸び上がりを
	   　通じて画像が異常に引き伸ばされ、キャプションが隠れてしまって
	   　いたため、写真の縦横比を固定するaspect-ratioに変更。
	   　これで写真の高さがキャプションの有無に左右されなくなり、
	   　タイトル・キャプションが常に写真の下に表示されるようになる。 */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.grm-single-gallery-caption {
	font-size: 11px;
	padding: 6px;
	color: #666;
}

.grm-single-gallery-title {
	font-size: 13px;
	font-weight: 700;
	color: #333;
	margin-bottom: 2px;
}

/* =========================
   コピー
========================= */

.grm-single-main-copy {
	font-size: 16px;
	line-height: 1.8;
	font-weight: 500;
	margin-bottom: 12px;
}

.grm-single-sub-copy {
	font-size: 14px;
	line-height: 1.7;
	color: #555;
}

/* =========================
   基本情報
========================= */

.grm-single-info {
	display: grid;
	gap: 12px;
}

.grm-single-info-row {
	display: flex;
	gap: 10px;
	border-bottom: 1px solid #eee;
	padding-bottom: 6px;
}

.grm-single-info-label {
	font-size: 12px;
	color: #999;
	min-width: 80px;
}

.grm-single-info-value {
	font-size: 14px;
}

/* =========================
   MAP
========================= */

.grm-map-iframe {
	width: 100%;
	height: 300px;
	border: none;
	border-radius: 0;
}

/* =========================
   自由項目
========================= */

.grm-single-free-item {
	margin-bottom: 16px;
}

.grm-single-free-label {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}

.grm-single-free-value {
	font-size: 13px;
	color: #555;
}

/* ▼ リスト表示（自由項目で「リストにする」を選んだ場合）：
   　テーマ側のリセットCSSの影響で「・」がカード外に左にはみ出て
   　しまっていたため、内側に収まるよう余白を明示的に指定する */
.grm-single-free-value ul {
	margin: 0;
	padding-left: 20px;
	list-style: disc outside;
}

.grm-single-free-value li {
	margin-bottom: 4px;
}

.grm-single-free-value li:last-child {
	margin-bottom: 0;
}

/* =========================
   営業日カレンダー
   ※ 読み取り専用の月間カレンダー。管理画面の休業日カレンダー
   　（.grm-sh-*）と見た目の考え方は同じだが、フロント表示用に
   　別クラス（.grm-cal-*）で用意している。
========================= */

.grm-cal-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.grm-cal-month {
	flex: 1 1 300px;
	min-width: 260px;
}

.grm-cal-month-title {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	text-align: center;
	margin: 0 0 12px;
}

.grm-cal-week-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 4px;
}

.grm-cal-week-cell {
	font-size: 11px;
	color: #999;
	text-align: center;
	padding: 4px 0;
}

.grm-cal-week-cell.is-sun {
	color: #d9534f;
}

.grm-cal-week-cell.is-sat {
	color: #4a7fd9;
}

.grm-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.grm-cal-cell {
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: #f4f4f4;
}

.grm-cal-cell.is-blank {
	background: transparent;
}

.grm-cal-num {
	font-size: 12px;
	font-weight: 600;
	color: #333;
	line-height: 1.2;
}

.grm-cal-status {
	font-size: 10px;
	line-height: 1.2;
	margin-top: 2px;
}

.grm-cal-cell.is-open {
	background: #edf5ef;
}

.grm-cal-cell.is-open .grm-cal-status {
	color: #4a8f63;
}

.grm-cal-cell.is-closed {
	background: #f7eeee;
}

.grm-cal-cell.is-closed .grm-cal-status {
	color: #c0605a;
}

.grm-cal-cell.is-weekend .grm-cal-num {
	color: #888;
}

.grm-cal-cell.is-jp-holiday .grm-cal-num {
	color: #c0605a;
}

.grm-cal-jp-name {
	font-size: 9px;
	color: #c0605a;
	line-height: 1.2;
	text-align: center;
}

/* 定休日ルールに当てはまるが、臨時営業として休業日を解除した日 */
.grm-cal-open-note {
	color: #2f7a44;
}

/* =========================
   レスポンシブ
========================= */

@media (max-width: 768px) {

	.grm-single-title {
		font-size: 24px;
	}

	.grm-single-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.grm-single-section {
		margin-bottom: 40px;
		padding-top: 28px;
	}

}

/* =========================
   メイン写真
   ※ 以前は写真の上に暗いグラデーション（.grm-hero-overlay）と
     店名（.grm-hero-title）を重ねて表示し、SNS/CTAアイコンも
     写真の脇に絶対配置で浮かせていたが、写真には文字を乗せず、
     角丸・影もなしのシンプルな1枚画像に変更。店名とアイコンは
     .grm-single-header-block 側（写真の外）に表示する。
========================= */

.grm-hero {
	overflow: hidden;
	border-radius: 0;
	margin-bottom: 40px;
}

.grm-hero img {
	/* ▼「画像はトリミングしないで」：高さ固定＋object-fit:coverで
	   　見切れさせず、画像本来の縦横比のまま幅いっぱいに表示する */
	width: 100%;
	height: auto;
	display: block;
}

/* =========================
   SNS アイコン（ページ下部「SNS / WEB」セクション用）
   ※ 円形の縁取り・影・四角の枠、いずれも付けない。
     背景や枠のない、アイコン画像そのものだけの表示にする。
========================= */

.grm-sns-icons {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin: 10px 0 20px;
	align-items: center;
}

.grm-sns-icon {
	width: 32px;
	height: 32px;
	border-radius: 0;
	background: transparent;
	border: none;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow: none;

	transition: opacity 0.25s;
}

.grm-sns-icon img {
	width: 30px;
	height: 30px;
	display: block;
}

.grm-sns-icon:hover {
	opacity: 0.7;
}

/* =========================
   CTA アイコン（店名の下・電話／SNS等）
   ※ 円形の縁取り・影・四角の枠、いずれも付けない。
     背景や枠のない、アイコン画像そのものだけの表示にする。
========================= */

.grm-cta {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin: 12px 0 8px;
	align-items: center;
}

.grm-cta-icon {
	width: 32px;
	height: 32px;
	border-radius: 0;
	background: transparent;
	border: none;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow: none;

	transition: opacity 0.25s;
}

.grm-cta-icon img {
	width: 28px;
	height: 28px;
	display: block;
}

.grm-cta-icon:hover {
	opacity: 0.7;
}

/* =========================
   店舗一覧に戻る
   ※ テーマ側の記事詳細ページ（single.php）の
     .grm-single-back / button button-outline を流用。
     ボタン関係は他ページと同じ丸い形のまま（角丸を消さない）。
========================= */

.grm-single-back {
	text-align: center;
	margin-top: 60px;
}