/* ========================================
   カスタムテンプレート共通デザイン
   トップページのトンマナに合わせたトークン・コンポーネント
======================================== */

.sr-page,
.sr-case,
.sr-shop,
.sr-shop-archive,
.sr-case-archive,
.sr-faq-archive,
.sr-recommend-archive,
.sr-recommend-single{
	--sr-text: #292925;
	--sr-text-muted: #666;
	--sr-border: rgba(41, 41, 37, .1);
	--sr-bg-soft: #fafaf8;
	--sr-accent: var(--color_main, #D3CE33);
	--sr-accent-soft: var(--color_main_thin, rgba(211, 206, 51, .08));
	--sr-shadow: 0 8px 32px rgba(41, 41, 37, .06);
	--sr-shadow-hover: 0 12px 40px rgba(41, 41, 37, .1);
	--sr-radius: 2px;
	color: var(--sr-text);
}

.is-site-biyou .sr-page,
.is-site-biyou .sr-case{
	--sr-bg-soft: #FCF8F9;
	--sr-accent-soft: rgba(230, 142, 156, .1);
}

/* セクション見出し */
.sr-section-heading{
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	border-bottom: 1px solid var(--sr-border);
}

.sr-section-heading__eyebrow,
.sr-section-heading .top-section-en{
	margin: 0 0 12px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .22em;
	color: var(--btn-main, var(--sr-accent));
	text-transform: uppercase;
}

.sr-section-heading__title,
.sr-section-heading .top-section-title{
	margin: 0;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .04em;
	color: var(--sr-text);
}

.sr-section-heading__lead{
	margin: 1rem 0 0;
	max-width: 56em;
	font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
	line-height: 1.9;
	color: var(--sr-text-muted);
}

.sr-subsection-heading{
	margin-bottom: 1.25rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--sr-accent);
}

.sr-subsection-heading__eyebrow{
	display: block;
	margin: 0 0 .35rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--btn-main, var(--sr-accent));
}

.sr-subsection-heading__title{
	margin: 0;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .02em;
	color: var(--sr-text);
}

/* 本文エリア */
.sr-page__content,
.sr-case__content,
.sr-shop__content,
.sr-shop__richtext{
	font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
	line-height: 1.95;
	color: var(--sr-text-muted);
}

.sr-page__content > *:first-child,
.sr-case__content > *:first-child{
	margin-top: 0;
}

/* カード共通 */
.sr-card{
	background: #fff;
	border: 1px solid var(--sr-border);
	box-shadow: var(--sr-shadow);
}

.sr-shop-card.sr-card,
.sr-related__item.sr-card{
	transition: box-shadow .25s, transform .25s;
}

.sr-shop-card.sr-card:hover,
.sr-related__item.sr-card:hover{
	box-shadow: var(--sr-shadow-hover);
}

@media (prefers-reduced-motion: no-preference){
	.sr-shop-card.sr-card:hover,
	.sr-related__item.sr-card:hover{
		transform: translateY(-2px);
	}
}

/* ボタン共通 */
.sr-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: .9em 1.75em;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	letter-spacing: .04em;
	border-radius: var(--sr-radius);
	transition: opacity .2s, transform .2s, background .2s, box-shadow .2s;
}

.sr-btn:hover{
	opacity: .88;
}

.sr-btn--primary{
	background: var(--btn-main, var(--sr-accent));
	color: #fff;
}

.sr-btn--primary:hover{
	opacity: 1;
	background: var(--btn-sub, var(--btn-main, var(--sr-accent)));
	color: #fff;
}

.sr-btn--dark{
	background: #fff;
	color: var(--btn-main, #4D861A);
	border: 2px solid var(--btn-main, #4D861A);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-main, #4D861A) 10%, transparent);
}

.sr-btn--dark:hover{
	opacity: 1;
	background: color-mix(in srgb, var(--btn-main, #4D861A) 8%, #fff);
	color: var(--btn-main, #4D861A);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--btn-main, #4D861A) 16%, transparent);
}

.sr-btn--line{
	background: #06C755;
	color: #fff;
}

/* ========================================
   店舗一覧カード（jnm-ml）：カード内クイックアクション
   カード全体を丸ごとリンクにするのではなく、詳細へのリンクとは別に
   「電話する」「LINEで相談する」を独立したボタンとして置くための構成。
   トップページ・改善事例ページの同期パターン（店舗カード）でも
   同じjnm-mlマークアップを使うため、shop.cssではなくここに置く。
======================================== */
.jnm-ml__card-link{
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.jnm-ml__more{
	align-self: flex-start;
	text-decoration: none;
}

/*
 * PC：LINE（整体・美容の1〜2個）のみ表示、電話ボタンは非表示。
 * 整体/美容のLINEボタンをひとまとまりにし、電話ボタンとは別行にすることで、
 * 片方のメニューしか無い店舗（LINEボタンが1個だけ）でも電話ボタンの行は独立する。
 */
.jnm-ml__actions{
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 2px 0 22px;
}

.jnm-ml__actions-line{
	display: flex;
	gap: 1rem;
}

.jnm-ml__action{
	flex: 1 1 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 2.75rem;
	padding: .65em;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .02em;
	text-align: center;
	border-radius: 6px;
	text-decoration: none;
	transition: opacity .2s;
}

.jnm-ml__action--tel{
	display: none;
	width: 100%;
	background: #fff;
	color: var(--btn-main);
	border: 1.5px solid var(--btn-main);
}

.jnm-ml__action--line{
	background: #06C755;
	color: #fff;
}

/* 整体=イエロー、美容=ピンク（FAQカテゴリタブ等と同じブランドカラー）。--lineより後ろに書いて上書きする */
.jnm-ml__action--seitai{
	background: #D3CE33;
	color: #fff;
}

.jnm-ml__action--biyou{
	background: #E68E9C;
	color: #fff;
}

.jnm-ml__action:hover{
	opacity: .85;
}

/* SP：電話するボタンも表示（LINEの2個の下に1行で） */
@media (max-width: 767px){
	.jnm-ml__action--tel{
		display: inline-flex;
	}
}