@charset "UTF-8";

/* =========================================================
   スマホ共通レイアウト
   CLEAN CSS / 2026-09-19
========================================================= */

/* =========================================================
   STEP15 / PRO UNIFIED STRUCTURE - PC ONLY
   PHP共通クラス対応版
   ---------------------------------------------------------
   ・/shop/をPCデザイン基準に固定
   ・GeneratePress外枠のページ別差を停止
   ・HEADER/NAV -> GOLD LINE -> HERO/IMAGE を直結
   ・全ページ共通 shell / hero / eyebrow / title / lead
   ・既存スマホCSSには触れない
========================================================= */
@media (min-width: 769px) {
	/* ----- GeneratePress frame ----- */
	.tkz-pro-page {
		background: #f2efe8 !important;
	}
	.tkz-pro-page .site-header {
		border-bottom: 0 !important;
		box-shadow: none !important;
	}
	.tkz-pro-page .main-navigation {
		background: #0b0b0c !important;
		border-bottom: 0 !important;
	}
	.tkz-pro-page #page,
	.tkz-pro-page .site,
	.tkz-pro-page .site-content,
	.tkz-pro-page .content-area,
	.tkz-pro-page #primary,
	.tkz-pro-page .site-main {
		width: 100% !important;
		max-width: none !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-top: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		background: #f2efe8 !important;
		box-sizing: border-box !important;
	}
	/* ----- The one and only page shell ----- */
	.tkz-pro-page .tkz-page-shell {
		width: 100% !important;
		max-width: 1100px !important;
		margin: 0 auto !important;
		padding: 0 20px 72px !important;
		background: #f2efe8 !important;
		box-sizing: border-box !important;
	}
	/* Single templates: old inner max-widths are disabled */
	.tkz-pro-page .tkz-master-single,
	.tkz-pro-page .tkz-dictionary-single {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	/* ----- Header -> gold line -> first content: zero gap ----- */
	.tkz-pro-page .tkz-page-first {
		margin-top: 0 !important;
		border-top: 1px solid #b99a5d !important;
	}
	.tkz-pro-page .tkz-page-first-visual {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-bottom: 0 !important;
	}
	.tkz-pro-page .tkz-page-first-visual img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}
	/* ----- One HERO system ----- */
	.tkz-pro-page .tkz-page-hero {
		position: relative !important;
		width: 100% !important;
		margin: 0 0 18px !important;
		padding: 46px 44px 43px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		background: linear-gradient(
			135deg,
			#0b0b0c 0%,
			#151516 72%,
			#241517 100%
		) !important;
		color: #f4f1ea !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-bottom: 1px solid rgba(185,154,93,.28) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	.tkz-pro-page .tkz-page-hero::after {
		content: "" !important;
		position: absolute !important;
		right: -90px !important;
		top: -110px !important;
		width: 300px !important;
		height: 300px !important;
		border: 1px solid rgba(185,154,93,.10) !important;
		border-radius: 50% !important;
		background: transparent !important;
		pointer-events: none !important;
	}
	.tkz-pro-page .tkz-page-eyebrow {
		position: relative !important;
		z-index: 1 !important;
		display: block !important;
		margin: 0 0 11px !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		color: #bda56f !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
		letter-spacing: .22em !important;
	}
	.tkz-pro-page .tkz-page-title {
		position: relative !important;
		z-index: 1 !important;
		margin: 0 0 13px !important;
		padding: 0 !important;
		color: #f4f1ea !important;
		font-size: 36px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		letter-spacing: .025em !important;
		border: 0 !important;
	}
	.tkz-pro-page .tkz-page-lead {
		position: relative !important;
		z-index: 1 !important;
		max-width: 680px !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #aaa59b !important;
		font-size: 17px !important;
		font-weight: 400 !important;
		line-height: 1.9 !important;
	}
	/* taxonomy description can contain its own p */
	.tkz-pro-page .tkz-page-lead p {
		margin: 0 !important;
		color: inherit !important;
		font: inherit !important;
		line-height: inherit !important;
	}
	/* Master title shares a row with age */
	.tkz-pro-page .tkz-master-single-name-row .tkz-page-title {
		margin-bottom: 0 !important;
	}
	/* Shop single is itself the common shell */
	.tkz-pro-page article.tkz-shop-single.tkz-page-shell {
		margin: 0 auto !important;
	}
	/* HOME: key visual is the first object, so it touches the gold line */
	.tkz-pro-page.home .tkz-home-keyvisual {
		margin-top: 0 !important;
	}
}
/* =========================================================
   STEP16 / PRO UNIFIED STRUCTURE - MOBILE ONLY
   PHP共通クラス対応版
   ---------------------------------------------------------
   ・PC版は一切変更しない
   ・全ページのスマホ外枠を共通化
   ・HEADER -> GOLD LINE -> HERO/IMAGE を直結
   ・ゴールドラインはナビではなく最初の画像/HERO上辺
   ・/shop/ のスマホ密度を基準に全ページ統一
========================================================= */
@media (max-width: 768px) {
	/* ----- GeneratePress frame ----- */
	.tkz-pro-page {
		background: #f2efe8 !important;
	}
	.tkz-pro-page .site-header {
		border-bottom: 0 !important;
		box-shadow: none !important;
	}
	.tkz-pro-page .main-navigation {
		border-bottom: 0 !important;
	}
	.tkz-pro-page #page,
	.tkz-pro-page .site,
	.tkz-pro-page .site-content,
	.tkz-pro-page .content-area,
	.tkz-pro-page #primary,
	.tkz-pro-page .site-main {
		width: 100% !important;
		max-width: none !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-top: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}
	/* ----- One mobile page shell ----- */
	.tkz-pro-page .tkz-page-shell {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 0 44px !important;
		background: #f2efe8 !important;
		box-sizing: border-box !important;
	}
	.tkz-pro-page .tkz-master-single,
	.tkz-pro-page .tkz-dictionary-single {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	/* ----- Gold line belongs to first content ----- */
	.tkz-pro-page .tkz-page-first {
		width: 100% !important;
		margin-top: 0 !important;
		border-top: 1px solid #b99a5d !important;
		box-sizing: border-box !important;
	}
	/* ----- First visual / TOP key visual ----- */
	.tkz-pro-page .tkz-page-first-visual {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-bottom: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}
	.tkz-pro-page .tkz-page-first-visual img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* ----- One mobile HERO system ----- */
	.tkz-pro-page .tkz-page-hero {
		position: relative !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 30px 18px 29px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		background: linear-gradient(
			135deg,
			#0b0b0c 0%,
			#151516 72%,
			#241517 100%
		) !important;
		color: #f4f1ea !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-bottom: 1px solid rgba(185,154,93,.28) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	.tkz-pro-page .tkz-page-hero::after {
		content: "" !important;
		position: absolute !important;
		right: -145px !important;
		top: -155px !important;
		width: 300px !important;
		height: 300px !important;
		border: 1px solid rgba(185,154,93,.10) !important;
		border-radius: 50% !important;
		background: transparent !important;
		pointer-events: none !important;
	}
	.tkz-pro-page .tkz-page-eyebrow {
		position: relative !important;
		z-index: 1 !important;
		display: block !important;
		margin: 0 0 9px !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		color: #bda56f !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
		letter-spacing: .20em !important;
	}
	.tkz-pro-page .tkz-page-title {
		position: relative !important;
		z-index: 1 !important;
		margin: 0 0 10px !important;
		padding: 0 !important;
		color: #f4f1ea !important;
		font-size: 28px !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
		letter-spacing: .015em !important;
		border: 0 !important;
	}
	.tkz-pro-page .tkz-page-lead {
		position: relative !important;
		z-index: 1 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #aaa59b !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 1.8 !important;
	}
	.tkz-pro-page .tkz-page-lead p {
		margin: 0 !important;
		color: inherit !important;
		font: inherit !important;
		line-height: inherit !important;
	}
	/* PC用の強制改行はスマホでは自然改行 */
	.tkz-pro-page .tkz-page-lead br,
	.tkz-pro-page .tkz-dictionary-pc-br {
		display: none !important;
	}
	/* Single master: 名前と年齢の行を狭い画面でも破綻させない */
	.tkz-pro-page .tkz-master-single-name-row {
		align-items: flex-start !important;
		gap: 10px !important;
	}
	.tkz-pro-page .tkz-master-single-name-row .tkz-page-title {
		margin-bottom: 0 !important;
	}
	/* HOME: key visual is the first object */
	.tkz-pro-page.home .tkz-home-keyvisual {
		margin-top: 0 !important;
	}
	/* HOME: 達人はスマホでも2列固定 / 写真 3:4 */
	.tkz-pro-page.home .tkz-home-master-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	.tkz-pro-page.home .tkz-home-master-photo {
		width: 100% !important;
		aspect-ratio: 3 / 4 !important;
		overflow: hidden !important;
		background: #111 !important;
	}
	.tkz-pro-page.home .tkz-home-master-photo img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center 34% !important;
	}
	/* Shop single is itself the common shell */
	.tkz-pro-page article.tkz-shop-single.tkz-page-shell {
		margin: 0 !important;
	}
}
/* =========================================================
   STEP15 MOBILE CLEANUP
   HERO H1直下の短いゴールドラインを全ページで撤去
   PC版は変更しない
========================================================= */
@media (max-width: 768px) {
	.tkz-pro-page .tkz-page-hero .tkz-page-title::after {
		content: none !important;
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		background: none !important;
	}
}
/* =========================================================
   STEP16 MOBILE HOME / NEW SHOP
   新着店舗：写真なし・2列
   PC版は変更しない
========================================================= */
@media (max-width: 768px) {
	.tkz-pro-page.home .tkz-home-shop-card > a {
		height: 100% !important;
	}
	.tkz-pro-page.home .tkz-home-shop-photo {
		display: none !important;
	}
	.tkz-pro-page.home .tkz-home-shop-area {
		margin-bottom: 6px !important;
	}
	.tkz-pro-page.home .tkz-home-shop-genres {
		margin-bottom: 7px !important;
		line-height: 1.45 !important;
	}
	.tkz-pro-page.home .tkz-home-shop-genres span {
		margin: 2px 2px 2px 0 !important;
		padding: 3px 5px !important;
		font-size: 12px !important;
	}
	.tkz-pro-page.home .tkz-home-shop-price {
		margin-top: 7px !important;
		font-size: 12px !important;
		line-height: 1.55 !important;
	}
}
/* =========================================================
   STEP17 MOBILE HOME / NEW SHOP
   新着店舗：地名＋店名のみ / 1列3行の薄型リスト
   PC版は変更しない
========================================================= */
@media (max-width: 768px) {
	.tkz-pro-page.home .tkz-home-shop-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		border-top: 1px solid #d9d4c9 !important;
	}
	.tkz-pro-page.home .tkz-home-shop-card {
		min-width: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid #d9d4c9 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	.tkz-pro-page.home .tkz-home-shop-card > a {
		display: block !important;
		padding: 0 !important;
		color: inherit !important;
		text-decoration: none !important;
	}
	.tkz-pro-page.home .tkz-home-shop-photo,
	.tkz-pro-page.home .tkz-home-shop-genres,
	.tkz-pro-page.home .tkz-home-shop-price {
		display: none !important;
	}
	.tkz-pro-page.home .tkz-home-shop-body {
		display: grid !important;
		align-items: center !important;
		min-width: 0 !important;
		height: auto !important;
		padding: 10px 2px !important;
		box-sizing: border-box !important;
	}
	.tkz-pro-page.home .tkz-home-shop-area {
		margin: 0 !important;
		color: #9b7d3d !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
		letter-spacing: .03em !important;
		white-space: nowrap !important;
	}
	.tkz-pro-page.home .tkz-home-shop-body h3 {
		min-width: 0 !important;
		margin: 0 !important;
		color: #2a2824 !important;
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
}
/* =========================================================
   STEP18 MOBILE HOME / NEW SHOP PLAY CATEGORY
   新着店舗：地名＋店名＋プレイカテゴリ / 1列3行
   PC版では追加表示しない
========================================================= */
.home .tkz-home-shop-plays {
	display: none;
}
@media (max-width: 768px) {
	.tkz-pro-page.home .tkz-home-shop-body {
		grid-template-columns: max-content minmax(0, 1fr) minmax(72px, 34%) !important;
		gap: 8px !important;
	}
	.tkz-pro-page.home .tkz-home-shop-plays {
		display: block !important;
		min-width: 0 !important;
		margin: 0 !important;
		color: #8a8173 !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.4 !important;
		text-align: right !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
}