@charset "utf-8";

/* スマホ専用の要素は PC では出さない */
.sdStickyHeader,
.sdBack,
.sdNoImage,
.sdActions {
	display: none;
}

.page-storeDetail .navigationBottom {
	display: none;
}

@media (max-width: 480px) {
	/* ---------- ページ全体 ---------- */
	.page-storeDetail > header,
	.page-storeDetail .pan2,
	.page-storeDetail .shopDetailRightCon {
		display: none;
	}
	.page-storeDetail .sub001,
	.page-storeDetail .sub001 .w1000,
	.page-storeDetail .sub001 .left {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		float: none;
	}
	body.page-storeDetail {
		background: #fff;
		/* 画面下の固定ボタンにページの末尾が隠れないようにする */
		padding-bottom: calc(80px + env(safe-area-inset-bottom));
	}
	.page-storeDetail .shopContentBox {
		position: relative;
		padding: 0;
		margin: 0;
		border: 0;
	}
	/* タブで飛んだとき、固定ヘッダーの下に見出しが隠れないようにする */
	.page-storeDetail .shopDetailLink {
		scroll-margin-top: 100px;
	}

	/* ---------- メイン画像 ---------- */
	.page-storeDetail .shopMainImg {
		height: 240px;
		margin: 0;
		overflow: hidden;
	}
	.page-storeDetail .shopMainImg a,
	.page-storeDetail .shopMainImg img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.sdNoImage {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 160px;
		background: #e0e0e0;
		color: #999;
		font-size: 14px;
		font-weight: 500;
	}

	/* ---------- 戻るボタン ---------- */
	.sdBack {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: #fff;
		cursor: pointer;
	}
	.sdBack::before {
		content: "";
		width: 10px;
		height: 10px;
		border-left: 1.5px solid #333;
		border-bottom: 1.5px solid #333;
		transform: rotate(45deg) translateX(2px);
	}
	.sdBack--hero {
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 10;
		width: 36px;
		height: 36px;
		border: 1.5px solid #ccc;
		border-radius: 50%;
	}
	.sdBack--plain {
		width: 32px;
		height: 32px;
		border: 0;
		border-radius: 50%;
	}

	/* ---------- 店名・割引・お気に入り ---------- */
	.page-storeDetail .shopBaseDetail {
		position: relative;
		padding: 16px 16px 8px;
		margin: 0;
	}
	.page-storeDetail .shopBaseDetail .bookmark {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 22px;
		color: #e91e63;
	}
	.page-storeDetail .shopBase3 {
		padding-right: 40px;
		margin-bottom: 4px;
		font-size: 12px;
		color: #666;
	}
	.page-storeDetail .shopDetailName {
		font-size: 20px;
		font-weight: 700;
		line-height: 1.4;
		color: #333;
	}
	.page-storeDetail .shopDetailKana {
		margin-bottom: 8px;
		font-size: 12px;
		color: #999;
	}
	.page-storeDetail .listCoupon {
		margin: 8px 0;
		padding: 6px 10px;
		border: 1px solid #f24822;
		border-radius: 4px;
		background: #fff;
		color: #f24822;
		font-size: 12px;
	}
	.page-storeDetail .listCoupon .pointBig2 {
		font-size: 18px;
		color: #f24822;
	}

	/* ---------- タブ(トップ / メニュー / 店舗情報) ---------- */
	.sdTabs {
		display: flex;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #e0e0e0;
		background: #fff;
	}
	.sdTabs-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px 0 10px;
		border-bottom: 2px solid transparent;
		color: #999;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
	}
	.sdTabs-item.is-active {
		color: #f24822;
		border-bottom-color: #f24822;
	}
	/* 既存のタブの中身(幅 33% のインライン指定や装飾)を打ち消す */
	.sdTabs--inline .shopDetailMenu,
	.sdTabs--inline .shopDetailMenuLast {
		width: auto !important;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		float: none;
	}
	.sdTabs--inline .sp {
		display: none;
	}

	/* ---------- トップ(紹介文・サブ画像) ---------- */
	.page-storeDetail .shopMainCatch {
		padding: 16px 16px 0;
		font-size: 16px;
		font-weight: 700;
		color: #333;
	}
	.page-storeDetail .shopMainCopy {
		padding: 8px 16px 16px;
		font-size: 14px;
		line-height: 25px;
		color: #333;
	}
	.page-storeDetail .shopSub3Box {
		float: none;
		width: auto;
		margin: 0 16px 16px;
	}
	.page-storeDetail .shopSub3Box .shopMainCopy {
		padding: 8px 0 0;
		font-size: 13px;
		line-height: 20px;
		color: #666;
	}
	.page-storeDetail .shopSub3BoxImg img {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		border-radius: 8px;
	}

	/* ---------- 見出し(メニュー / 店舗情報) ---------- */
	.page-storeDetail .shopDetailMenuTitle,
	.page-storeDetail .shopDetailAccessTitle {
		margin: 16px 0 0;
		padding: 10px 16px;
		background: #fff8ee;
		border: 0;
		font-size: 18px;
		font-weight: 700;
		color: #333;
	}

	/* ---------- メニュー ---------- */
	.page-storeDetail .shopDetailMenuBox {
		margin: 0 16px;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	.page-storeDetail .shopDetailMenuName {
		margin-bottom: 4px;
		font-size: 14px;
		font-weight: 700;
		color: #333;
	}
	.page-storeDetail .shopDetailMenuText {
		font-size: 12px;
		color: #666;
	}
	.page-storeDetail .shopDetailMenuPrice {
		margin-top: 4px;
		font-size: 14px;
		font-weight: 700;
		color: #333;
		text-align: right;
	}

	/* ---------- 店舗情報 ---------- */
	.page-storeDetail .shopDetailTable {
		width: calc(100% - 32px);
		margin: 0 16px 24px;
		border-collapse: collapse;
	}
	.page-storeDetail .shopDetailTableTr {
		border-bottom: 1px solid #e0e0e0;
	}
	.page-storeDetail .shopDetailTableTd1,
	.page-storeDetail .shopDetailTableTd2 {
		padding: 12px 0;
		border: 0;
		background: none;
		font-size: 14px;
		vertical-align: top;
		word-break: break-all;
	}
	.page-storeDetail .shopDetailTableTd1 {
		width: 80px;
		color: #666;
		font-weight: 400;
	}
	.page-storeDetail .shopDetailTableTd2 {
		color: #333;
	}
	.page-storeDetail .shopDetailTableTd2 a {
		color: #0d99ff;
		text-decoration: underline;
	}
	.page-storeDetail .shopDetailTableMap iframe {
		display: block;
		width: 100%;
		height: 180px;
		margin-top: 8px;
		border-radius: 8px;
	}

	/* ---------- スクロールで出る固定ヘッダー ---------- */
	.sdStickyHeader {
		display: block;
		position: fixed;
		top: 0;
		/* ステータスバーの下に出す(viewport-fit=cover のとき) */
		padding-top: env(safe-area-inset-top);
		left: 0;
		right: 0;
		z-index: 1001;
		background: #fff;
		box-shadow: 0 1px 0 #e0e0e0;
		transform: translateY(-110%);
		transition: transform 0.2s ease;
	}
	.sdStickyHeader.is-shown {
		transform: translateY(0);
	}
	.sdStickyHeader-bar {
		display: flex;
		align-items: center;
		padding: 8px 12px;
	}
	.sdStickyHeader-title {
		flex: 1;
		margin: 0 8px;
		overflow: hidden;
		font-size: 16px;
		font-weight: 700;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
	}
	.sdStickyHeader-spacer {
		width: 32px;
	}

	/* ---------- 画面下の固定ボタン ---------- */
	.sdActions {
		display: flex;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		padding: 12px 16px;
		padding-bottom: max(12px, env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #e0e0e0;
	}
	.sdActions-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 48px;
		border-radius: 50px;
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
	}
	.sdActions-btn--outline {
		background: #fff;
		border: 1.5px solid #ccc;
		color: #f24822;
	}
	.sdActions-btn--primary {
		background: #f24822;
		border: 1.5px solid #f24822;
		color: #fff;
	}
	.sdActions-btn.is-disabled {
		opacity: 0.4;
		pointer-events: none;
	}
}