@charset "UTF-8";

/**
 * 出店情報詳細（single-shop.php）
 *
 * design/出店情報詳細.svg（SP 390）と 出店情報詳細-pc.svg（PC 1920）準拠。
 *
 *                    SP(390)              PC(1920)
 *   コンテンツ幅      330                  808（区切り罫のみ 1200）
 *   カテゴリーバッジ  135x24 rx12 / 14px  226x47 rx23.5 / 20px
 *   タイトル          25px w800 ls.05em    37px w800 ls.05em
 *   出店者名          17px w700 ls.05em    —
 *   写真フレーム      330x205 果線 #707070  808x503 果線 #707070
 *     └ 中の画像      187x187 中央          457x457 中央
 *   本文              14px / 行送り 28px   18px / 行送り 32px
 *   区切り罫          —                    1200x2px #707070
 *   一覧に戻るボタン  235x54 r27 #0b53a4 ＋ 白丸左矢印(29px)
 *
 * 写真は比率 1.6 の白フレームに contain で収める。
 * 入稿画像の縦横比は 0.71～1.6 と幅があるが、
 * フレーム側で高さを予約するのでレイアウトは安定する（CLS 0）。
 */

.shop-single {
	--shop-single-text: #535353;
	--shop-single-accent: #0b53a4;

	background-color: #fffaef;
}

.shop-single__container {
    max-width: 1200px;
	margin: 0 auto;
	padding-top: 30px;
}

/* 本文・写真・見出しは 808px に揃え、区切り罫だけが 1200px 幅になる。*/
.shop-single__header,
.shop-single__figure,
.shop-single__content {
	max-width: 808px;
	margin-right: auto;
	margin-left: auto;
}

/* --- 見出しブロック --------------------------------------------------- */
.shop-single__header {
	text-align: center;
}

/* SVG: SP 135x24 rx12 / PC 226x47 rx23.5。色はタームのカテゴリー色。*/
.shop-single__category {
	margin: 0;
}

.shop-single__category-link {
	display: inline-flex;
	box-sizing: border-box;
	min-width: 135px;
	min-height: 24px;
	padding: 3px 18px;
	border-radius: 12px;
	background-color: var(--shop-category-color, #298efa);
	color: var(--shop-category-text, #ffffff);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: -0.04em;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease;
}

@media screen and (min-width: 768px) {
	.shop-single__category-link {
		min-width: 226px;
		min-height: 47px;
		padding: 6px 28px;
		border-radius: 23.5px;
		font-size: 20px;
		letter-spacing: 0;
	}
}

a.shop-single__category-link:hover,
a.shop-single__category-link:focus-visible {
	opacity: 0.85;
}

a.shop-single__category-link:focus-visible {
	outline: 3px solid rgba(83, 83, 83, 0.4);
	outline-offset: 3px;
}

/* SVG: SP 25px / PC 37px、いずれも w800 ls.05em */
.shop-single__title {
	margin: 20px 0 0;
	color: var(--shop-single-text);
	font-weight: 800;
	font-size: clamp(1.563rem, 1.2rem + 1.8vw, 2.313rem);
	line-height: 1.5;
	letter-spacing: 0.05em;
}

/* SVG: SP のみの要素。PC デザインにはないが、
   出店者名を別行で示す情報設計は PC でも維持する。*/
.shop-single__provider {
	margin: 12px 0 0;
	color: var(--shop-single-text);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
	.shop-single__provider {
		margin-top: 16px;
		font-size: 19px;
	}
}

/* --- 写真フレーム ------------------------------------------------------- */
/* SVG: SP 330x205 / PC 808x503（いずれも比率 ≈ 1.6）の果線 #707070 の白フレーム。
   入稿画像の縦横比は 0.71～1.6 と幅があるため、
   フレームは aspect-ratio で高さを予約し（CLS 0）、
   中の画像は contain で全体が見えるように中央揃えする。*/
.shop-single__figure {
	display: flex;
	box-sizing: border-box;
	margin-top: 28px;
	padding: 10px;
	border: 1px solid #707070;
	background-color: #ffffff;
	justify-content: center;
	align-items: center;

	aspect-ratio: 66 / 41;
}

.shop-single__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* --- 本文 ------------------------------------------------------------- */
/* SVG: SP 14px 行送り 28px / PC 18px 行送り 32px、いずれも左揃え */
.shop-single__content {
	margin-top: 34px;
	color: var(--shop-single-text);
	font-size: 14px;
	line-height: 2;
}

.shop-single__content > :first-child {
	margin-top: 0;
}

.shop-single__content :is(h2, h3, h4) {
	font-weight: 700;
	line-height: 1.6;
}

.shop-single__content h2 {
	font-size: 1.35em;
}

.shop-single__content h3 {
	font-size: 1.15em;
}

.shop-single__content :is(ul, ol) {
	padding-left: 1.5em;
}

.shop-single__content ul {
	list-style: disc;
}

.shop-single__content ol {
	list-style: decimal;
}

.shop-single__content img {
	height: auto;
	max-width: 100%;
}

.shop-single__content a {
	color: var(--shop-single-accent);
	text-decoration: underline;
}

.shop-single__content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
}

.shop-single__content :is(th, td) {
	padding: 8px 12px;
	border: 1px solid #d6d0c4;
}

/* --- 区切り罫 ----------------------------------------------------------- */
/* SVG: PC のみ。本文と一覧に戻るボタンの間に入る 1200x2px の区切り線。*/
.shop-single__divider {
	display: none;
}

@media screen and (min-width: 768px) {
	.shop-single__divider {
		display: block;
		margin: 46px 0 0;
		border: none;
		border-top: 2px solid #707070;
	}
}

/* --- 一覧に戻る ------------------------------------------------------- */
/* SVG: 235x54 r27 #0b53a4、左に白丸(29px)の左向き矢印、文字 16px w700 ls.05em */
/* 下余白はタイトルとのバランスを取り、カード末尾を詰めた見た目にする */
.shop-single__back {
	margin: 60px 0 60px;
	text-align: center;
}

.shop-single__back-link {
	display: inline-flex;
	box-sizing: border-box;
	width: 235px;
	max-width: 100%;
	min-height: 54px;
	padding: 8px 24px 8px 20px;
	border-radius: 27px;
	background-color: var(--shop-single-accent);
	color: #ffffff;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-decoration: none;
	gap: 12px;
	justify-content: center;
	align-items: center;
	transition: background-color 0.2s ease;
}

.shop-single__back-icon {
	display: block;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath fill='none' stroke='%230b53a4' stroke-width='2.5' d='M8 1 2.2 6.77 8 12.54'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 9px 11px;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.shop-single__back-link:hover,
.shop-single__back-link:focus-visible {
	background-color: #094185;
	color: #ffffff;
}

.shop-single__back-link:hover .shop-single__back-icon,
.shop-single__back-link:focus-visible .shop-single__back-icon {
	transform: translateX(-3px);
}

.shop-single__back-link:focus-visible {
	outline: 3px solid rgba(11, 83, 164, 0.35);
	outline-offset: 3px;
}

/* --- レスポンシブ ----------------------------------------------------- */
@media screen and (min-width: 768px) {
	.shop-single__container {
		padding-top: 56px;
	}

	.shop-single__figure {
		margin-top: 40px;
	}

	/* SVG: PC は 18px / 行送り 32px */
	.shop-single__content {
		margin-top: 44px;
		font-size: 18px;
		line-height: 32px;
	}

	.shop-single__back {
		margin: 46px 0 70px;
	}
}

@media screen and (max-width: 767px) {
	.shop-single__container {
		padding-top: 22px;
	}

	.shop-single__title {
		margin-top: 16px;
	}

	.shop-single__figure {
		margin-top: 28px;
	}

	.shop-single__content {
		margin-top: 28px;
	}

	.shop-single__back {
		margin: 46px 0 48px;
	}

	/* パンくずの最終要素（長い店名）は 1 行で省略して折り返しを防ぐ */
	.shop-single .breadcrumb_list {
		align-items: center;
	}

	.shop-single .breadcrumb_list .page-link_text {
		flex: 0 0 auto;
		height: auto;
	}

	.shop-single .breadcrumb_list .page-link_text[aria-current="page"] {
		overflow: hidden;
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* --- モーション設定の尊重 --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.shop-single__category-link,
	.shop-single__back-link,
	.shop-single__back-icon {
		transition: none;
	}

	.shop-single__back-link:hover .shop-single__back-icon,
	.shop-single__back-link:focus-visible .shop-single__back-icon {
		transform: none;
	}
}