@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ===============================
   SWELL見出しリセット
================================= */

h2,
h3{
  margin: 0;
  padding: 0;

  border: 0;
  background: none;
  box-shadow: none;

  font-weight: inherit;
  line-height: inherit;
}

h2::before,
h2::after,
h3::before,
h3::after{
  content: none !important;
  display: none !important;
}

/*--------------------
上の h2,h3 リセットは要素セレクタ（詳細度が低い）なので、
.post_content h2:where(...) のような「本文見出し用の装飾」には勝てない。
店舗名（.jnm-ml__name）のように、本文見出しではないのに.post_contentの中で
h2/h3を使っている箇所は、ここでクラス指定して個別に打ち消す。
--------------------*/
.post_content h2.jnm-ml__name,
.post_content h3.jnm-ml__name{
	background: none;
	padding: 0;
	position: static;
	z-index: auto;
	color: #3a3a3a;
	font-weight: 600;
}

.post_content h2.jnm-ml__name::before,
.post_content h3.jnm-ml__name::before{
	content: none;
}

/*--------------------
店舗カード（jnm-ml）の「営業時間」等ラベルが、スマホ幅で不自然に
2行へ折り返さないようにする保険（本体スタイルはカスタマイザーの追加CSS側で管理）。
--------------------*/
.jnm-ml__info dt{
	white-space: nowrap;
}

/*
 * 営業時間「10：00～18：30（最終受付17：30）」がカード幅の中で1行に収まるよう、
 * 項目名の列を詰め、値の文字サイズをカード幅に合わせて縮める（上限は従来の大きさ）。
 * 17.6 は最長の営業時間の文字幅（約17.2文字分）に少し余裕を足した値。
 */
.jnm-ml__info{
	container-type: inline-size;
}
dl.jnm-ml__info > div{
	grid-template-columns: 4.8em 1fr;
	column-gap: .6em;
}
dl.jnm-ml__info dd{
	font-size: clamp(10px, calc((100cqi - 5.4em) / 17.6), 1em);
}
/*--------------------
セクションFV（整体・美容 共通パターン）
SWELLの本文見出し装飾（.post_content h1 等）に負けないよう、
class指定でまとめて上書きしている。
--------------------*/
.section-fv{
	
	min-height:45vw;
	display:flex;
	align-items:center;
	
}

.section-fv .section-fv__eyebrow{
	color: #fff;
	font-size: 14px;
	letter-spacing: .1em;
	margin: 0 0 .75em;
}

.section-fv h2.section-fv__title.section-fv__title{
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 .5em;
	color: #fff;
	font-size: clamp(20px, 4.5vw, 45px);
	line-height: 1.4;
	font-weight: 700;
}

.section-fv .section-fv__text{
	color: #fff;
	font-size: clamp(14px, 1.6vw, 18px);
	line-height: 1.9;
	max-width: 40em;
	margin: 0;
}

@media (min-width:768px){

	.section-fv{
		min-height:40vw !important;

    height:40vw !important;
		position:relative;
		overflow:hidden;
	}

	/* 左側を白くぼかす */
	.section-fv::before{
		content:"";
		position:absolute;
		inset:0;
		z-index:1;

		background:

        linear-gradient(

            90deg,

            #FCF8F9 0%,

            #FCF8F9 18%,

            rgba(252,248,249,.95) 30%,

            rgba(252,248,249,.75) 42%,

            rgba(252,248,249,.35) 58%,

            rgba(252,248,249,0) 78%

        );
		pointer-events:none;
	}

	/* img要素タイプ */

	.section-fv .wp-block-cover__image-background{
		max-width:none !important;
		left:auto !important;
		right:-12% !important;
		object-fit:cover !important;
		object-position:center center !important;
	}
	/* background-imageタイプ */
	.section-fv{
		background-position:100% center !important;
		background-size:cover !important;
	}

	/* テキストを前面に */
	.section-fv .wp-block-cover__inner-container{
		position:relative;
		z-index:2;

	}

	/* PCだけ文字色を変更 */
	.is-site-biyou .section-fv .section-fv__eyebrow{
		color:#E68E9C;
	}

	.is-site-biyou .section-fv h2.section-fv__title.section-fv__title{
		color:#292925;
	}

	.is-site-biyou .section-fv .section-fv__text{
		color:#666;
	}
}
@media (max-width: 767px) {
	.section-fv{
		min-height: 70svh;
		align-items:end;
	}
	.section-fv{
		min-height: 40svh!important;
		height:75svh !important;
		align-items:end;
	}
}

/*--------------------
セクションFV：縦長写真用バリエーション（カバーブロックの追加CSSクラスに section-fv--portrait を付与）
縦長写真を横長FVに全面で敷くとアップになりすぎるため、PCでは写真を右側60%に置き、
左端だけ地色（#FCF8F9）へグラデーションでなじませる。SPは通常の section-fv と同じく全面表示。
--------------------*/
@media (min-width:768px){
	.section-fv.section-fv--portrait{
		--fv-photo-w: 60vw;
		background-color: #FCF8F9;
	}

	.section-fv.section-fv--portrait .wp-block-cover__image-background{
		left: auto !important;
		right: 0 !important;
		width: var(--fv-photo-w) !important;
		object-position: center 30% !important;
	}

	.section-fv.section-fv--portrait::before{
		background: linear-gradient(
			90deg,
			#FCF8F9 0%,
			#FCF8F9 calc(100% - var(--fv-photo-w)),
			rgba(252,248,249,.85) calc(100% - var(--fv-photo-w) + 8vw),
			rgba(252,248,249,.4) calc(100% - var(--fv-photo-w) + 16vw),
			rgba(252,248,249,0) calc(100% - var(--fv-photo-w) + 24vw)
		);
	}

	/* 写真の左端（グラデーションで地色に溶けている範囲）まではテキストを載せてよいので、その分だけ右側を空ける */
	.section-fv.section-fv--portrait .wp-block-cover__inner-container{
		padding-right: calc(var(--fv-photo-w) - 26vw);
	}
}

.sp-br{
	display:none;
}

@media (max-width: 767px){
	.sp-br{
		display:block;
	}
}

/*
 * SP追従CTAバー（全ページ共通・wp_footerで出力）。
 * 色・形は共通の .sr-btn / .sr-btn--line / .sr-btn--dark をそのまま使い、
 * ここでは固定バーとしてのレイアウトだけを定義する。
 */
.sr-sticky-cta{
	display: none;
}

@media (max-width: 767px){
	body{
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	.sr-sticky-cta{
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		gap: .4rem;
		padding: .5rem .4rem calc(.5rem + env(safe-area-inset-bottom, 0px));
		background: #fff;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
	}

	.sr-sticky-cta__btn{
		flex: 1 1 50%;
		min-width: 0;
		padding: .75em .2em;
		font-size: .8125rem;
		white-space: nowrap;
	}

	/*
	 * SP追従CTAバー（.sr-sticky-cta）とSWELL標準の「トップへ戻る」ボタン（.p-fixBtnWrap）が
	 * 画面右下で重なるため、CTAバーの高さ（約64px）分だけ上にずらす。
	 */
	.p-fixBtnWrap{
		bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px));
	}
}
/*--------------------
ヘッダーPCメニュー：ホバー時の下線
SWELL標準はクリック領域(ヘッダー高さ分)の下端に太い下線が出るため、
メニュー文字から離れて見える。文字（.ttl）の直下だけに細い下線を出す。
--------------------*/
.c-gnav > .menu-item > a{
	overflow: visible;
}

.c-gnav > .menu-item > a::after{
	display: none;
}

.c-gnav > .menu-item > a > .ttl{
	position: relative;
	display: inline-block;
}

.c-gnav > .menu-item > a > .ttl::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background: var(--color_main);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s;
}

.c-gnav > .menu-item:hover > a > .ttl::after,
.c-gnav > .-current > a > .ttl::after{
	transform: scaleX(1);
}

/*--------------------
ドロワーメニュー（SP開閉メニュー）
SWELL標準の「MENU」ベタ塗りタイトルブロックを、
サイトのトンマナ（欧文ロゴ・落ち着いた配色）に合わせて軽量化。
リストのホバー/現在地表示も、PCメニューの下線ホバーと統一する。
--------------------*/
.p-spMenu .c-widget__title.-spmenu{
	background: none;
	color: var(--color_main);
	padding: 0 0 .75em;
	border-radius: 0;
	border-bottom: 1px solid var(--color_border);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2em;
}

.c-spnav a{
	position: relative;
	transition: color .25s;
}

.c-spnav a:hover{
	background: none;
	color: var(--color_main);
}

.c-spnav a::after{
	content: "";
	position: absolute;
	left: .25em;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--color_main);
	transition: width .25s;
}

.c-spnav a:hover::after,
.c-spnav .current-menu-item > a::after,
.c-spnav .current_page_item > a::after{
	width: 24px;
}

/*--------------------
カスタムテンプレート：コンテンツ上下余白
症状詳細・メニュー詳細・事例・店舗・FAQ 共通
--------------------*/
.sr-page > .l-mainContent__inner,
.sr-case > .l-mainContent__inner,
.sr-shop > .l-mainContent__inner,
.sr-shop-archive > .l-mainContent__inner,
.sr-faq-archive > .l-mainContent__inner,
.sr-staff-single > .l-mainContent__inner{
	padding-top: clamp(2.75rem, 5.5vw, 4.5rem);
	padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
}

.sr-recommend-single > .sr-recommend-single__main{
	padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
}

.sr-page-bottom{
	margin-top: 0;
	margin-bottom: 0;
}

/* クロスリンク（同期パターン）とフッターの間を詰める */
.sr-page-bottom > *:last-child{
	margin-bottom: 0 !important;
}

.sr-page-bottom > *:last-child .swell-block-fullWide,
.sr-page-bottom > *:last-child .alignfull{
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.sr-page:has(> .sr-page-bottom) > .l-mainContent__inner,
.sr-case:has(> .sr-page-bottom) > .l-mainContent__inner,
.sr-recommend-single:has(> .sr-page-bottom) > .l-mainContent__inner,
.sr-staff-single:has(> .sr-page-bottom) > .l-mainContent__inner{
	margin-bottom: 0;
}

.sr-page:has(> .sr-page-bottom),
.sr-case:has(> .sr-page-bottom),
.sr-case-archive:has(> .sr-page-bottom),
.sr-recommend-single:has(> .sr-page-bottom),
.sr-recommend-archive:has(> .sr-page-bottom),
.sr-staff-single:has(> .sr-page-bottom){
	margin-bottom: 0;
	padding-bottom: 0;
}

/* SWELL標準：#content 下 margin 6em をフッター直上では打ち消す */
#content:has(.sr-page-bottom),
#content:has(.sr-case-archive),
#content:has(.sr-recommend-archive){
	margin-bottom: 0;
}

/* 改善事例カード：カード全体をクリック可能にしつつ、タグ・CTAボタンは個別リンクとして独立させる */
.voice-card{
	position: relative;
	--voice-accent: var(--sr-accent, #D3CE33);
}

/* 美容の事例カードは店舗種別に関わらずピンクで統一（整体・美容が混在する一覧でも見分けられるように） */
.voice-card--beauty{
	--voice-accent: #E68E9C;
}

.voice-card__cover{
	position: absolute;
	inset: 0;
	z-index: 1;
	text-indent: -9999px;
	overflow: hidden;
}

.voice-card__cover:focus-visible{
	outline:2px solid var(--btn-main, #D3CE33);
	outline-offset:3px;
}

/* タグ・CTAボタンはカード全体リンクより手前に出して、個別にクリックできるようにする */
.voice-card__tag,
.voice-card__cta{
	position: relative;
	z-index: 2;
}

.voice-card__tag{
	text-decoration: none;
	cursor: pointer;
}

.voice-card__tag:hover{
	text-decoration: underline;
}

.voice-card__cta{
	display: flex;
	width: 100%;
	margin-top: auto;
	padding-top: .85em;
	padding-bottom: .85em;
	font-size: .875rem;
	min-height: 0;
}

/* 改善事例カード：属性／お悩み／行ったサポート（効果・数字は詳細ページで見せるため、カードは入口の情報に絞る） */
.voice-card .voice-card__profile{
	display: block;
	margin: 0 0 .75rem;
	text-align: left;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color_text, #333);
}

.voice-card__facts{
	display: grid;
	gap: .7rem;
	margin: 0 0 1rem;
}

.voice-card__fact{
	margin: 0;
}

.voice-card__fact-label{
	margin: 0 0 .3rem;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sr-text-muted, #777);
}

.voice-card__fact-items{
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
}

.voice-card .voice-card__fact-items .voice-card__tag,
.voice-card__support{
	display: inline-block;
	padding: .2em .65em;
	border-radius: 3px;
	font-size: .75rem;
	line-height: 1.5;
}

.voice-card .voice-card__fact-items .voice-card__tag{
	background: color-mix(in srgb, var(--voice-accent) 14%, #fff);
	color: color-mix(in srgb, var(--voice-accent) 70%, #333);
}

.voice-card__support{
	border: 1px solid #ddd;
	background: #fff;
	color: #555;
}

/* 施術後の変化：カードでは5行までに収め、続きは詳細ページで読んでもらう */
.voice-card__result{
	margin: 0 0 1rem;
	padding: .75rem .85rem;
	border-radius: 4px;
	background: color-mix(in srgb, var(--voice-accent) 7%, #fff);
}

.voice-card__result-text{
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.7;
	color: var(--color_text, #333);
}

/* メニュー名のサポートタグはメニューページへのリンク（カード全体リンクより手前に出す） */
.voice-card__support--menu{
	position: relative;
	z-index: 2;
	border-color: color-mix(in srgb, var(--voice-accent) 45%, #fff);
	color: color-mix(in srgb, var(--voice-accent) 70%, #333);
	text-decoration: none;
}

.voice-card__support--menu:hover{
	text-decoration: underline;
}

/* 改善事例カード：個人の感想／効果の個人差に関する注記 */
.sr-case-disclaimer{
	margin: 1rem 0 0;
	color: var(--sr-text-muted, #888);
	font-size: .8125rem;
	line-height: 1.7;
	text-align: center;
}

/* 改善事例カード（トップ・一覧）：文字数制限の保険 */
.voice-card--compact .voice-card__review-text{
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}

.voice-card--compact .voice-card__profile{
	max-width:100%;
	white-space:normal;
}

/* 改善事例カード：「ご来店後」はカード上ではアコーディオンにして、詳細ページ遷移前でもタップで全文を読める */
.voice-card__after{
	position: relative;
	margin-top: .2em;
}

.voice-card__after > summary{
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .3em 0;
	cursor: pointer;
	list-style: none;
}

.voice-card__after > summary::-webkit-details-marker{
	display: none;
}

.voice-card__after > summary::marker{
	content: "";
}

.voice-card__after-summary-main{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .5em;
	flex: 1;
	min-width: 0;
}

.voice-card__after-hint{
	font-size: .8em;
	font-weight: 600;
	color: var(--voice-accent, #D3CE33);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.voice-card__after[open] .voice-card__after-hint{
	display: none;
}

/* 矢印を強調：太めのシェブロンを右→下へ切り替え、閉じている間は控えめに揺らして視線を誘導 */
.voice-card__after-toggle{
	position: relative;
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	margin-left: auto;
	animation: sr-voice-after-nudge 1.3s ease-in-out infinite;
}

.voice-card__after > summary:hover .voice-card__after-toggle,
.voice-card__after > summary:active .voice-card__after-toggle,
.voice-card__after[open] .voice-card__after-toggle{
	animation: none;
}

.voice-card__after-toggle::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .65em;
	height: .65em;
	border-top: 3.5px solid var(--voice-accent, #D3CE33);
	border-right: 3.5px solid var(--voice-accent, #D3CE33);
	transform: translate(-65%, -50%) rotate(45deg);
	transition: transform .25s ease;
}

.voice-card__after[open] .voice-card__after-toggle::before{
	transform: translate(-50%, -65%) rotate(135deg);
}

.voice-card__after .voice-card__state-text{
	margin-top: .6em;
}

@keyframes sr-voice-after-nudge{
	0%, 100%{
		transform: translateX(0);
	}
	50%{
		transform: translateX(.3em);
	}
}

@media (prefers-reduced-motion: reduce){
	.voice-card__after-toggle{
		animation: none;
	}
}

/* 改善事例カルーセル（PCは3枚・SPは1枚・左右ナビ） */
.sr-case-carousel{
	--sr-case-visible: 3;
	--sr-case-gap: .85rem;
	--sr-carousel-accent: #D3CE33;
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .5rem .65rem;
}

.is-site-seitai .sr-case-carousel{
	--sr-carousel-accent: var(--color_main, #D3CE33);
}

.is-site-biyou .sr-case-carousel{
	--sr-carousel-accent: var(--color_main, #E68E9C);
}

body:not(.is-site-seitai):not(.is-site-biyou) .sr-case-carousel{
	--sr-carousel-accent: var(--btn-main, var(--color_main, #4D861A));
}

.sr-case-carousel.is-single-page{
	grid-template-columns: minmax(0, 1fr);
}

.sr-case-carousel.is-single-page .sr-case-carousel__nav{
	display: none;
}

.sr-case-carousel__viewport{
	min-width: 0;
	overflow: hidden;
}

.sr-case-carousel__track{
	display: flex;
	gap: var(--sr-case-gap);
	transform: translate3d(0, 0, 0);
	transition: transform .35s ease;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce){
	.sr-case-carousel__track{
		transition: none;
	}
}

.sr-case-carousel__slide{
	flex: 0 0 calc((100% - (var(--sr-case-gap) * (var(--sr-case-visible) - 1))) / var(--sr-case-visible));
	min-width: 0;
	max-width: calc((100% - (var(--sr-case-gap) * (var(--sr-case-visible) - 1))) / var(--sr-case-visible));
}

.sr-case-carousel__slide .voice-card{
	height: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.sr-case-carousel__nav{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1.5px solid var(--sr-carousel-accent, #D3CE33);
	border-radius: 999px;
	background: #fff;
	color: var(--sr-carousel-accent, #D3CE33);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sr-carousel-accent, #D3CE33) 18%, transparent);
	transition: background .2s ease, color .2s ease, opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.sr-case-carousel__nav:hover:not(:disabled){
	background: var(--sr-carousel-accent, #D3CE33);
	color: #fff;
	transform: translateY(-1px);
}

.sr-case-carousel__nav:disabled{
	opacity: .35;
	cursor: default;
	box-shadow: none;
}

@media (max-width: 767px){
	.sr-case-carousel{
		--sr-case-visible: 1;
		--sr-case-gap: .45rem;
		gap: .35rem;
	}

	.sr-case-carousel__nav{
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.25rem;
	}

	.sr-case-carousel .voice-card__body{
		padding: .7rem .65rem .8rem !important;
		box-sizing: border-box;
	}

	.sr-case-carousel .voice-card__meta{
		gap: .25rem .35rem;
		margin-bottom: .5rem !important;
	}

	.sr-case-carousel .voice-card__tag,
	.sr-case-carousel .voice-card__profile{
		font-size: .6875rem;
		line-height: 1.35;
	}

	.sr-case-carousel .voice-card__change{
		gap: .3rem !important;
	}

	.sr-case-carousel .voice-card__state-label{
		margin-bottom: .15rem !important;
		font-size: .625rem;
	}

	.sr-case-carousel .voice-card__state-text{
		margin: 0 !important;
		font-size: .75rem !important;
		line-height: 1.45 !important;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* 専門家・各分野のプロからの推薦カルーセル（整体／美容トップ：PCは4枚・SPは1枚・左右ナビ） */
.sr-recommend-carousel{
	--sr-recommend-visible: 4;
	--sr-recommend-gap: .85rem;
	--sr-carousel-accent: #D3CE33;
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .5rem .65rem;
}

.is-site-seitai .sr-recommend-carousel{
	--sr-carousel-accent: var(--color_main, #D3CE33);
}

.is-site-biyou .sr-recommend-carousel{
	--sr-carousel-accent: var(--color_main, #E68E9C);
}

body:not(.is-site-seitai):not(.is-site-biyou) .sr-recommend-carousel{
	--sr-carousel-accent: var(--btn-main, var(--color_main, #4D861A));
}

.sr-recommend-carousel.is-single-page{
	grid-template-columns: minmax(0, 1fr);
}

.sr-recommend-carousel.is-single-page .sr-recommend-carousel__nav{
	display: none;
}

.sr-recommend-carousel__viewport{
	min-width: 0;
	overflow: hidden;
}

.sr-recommend-carousel__track{
	display: flex;
	gap: var(--sr-recommend-gap);
	transform: translate3d(0, 0, 0);
	transition: transform .35s ease;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce){
	.sr-recommend-carousel__track{
		transition: none;
	}
}

.sr-recommend-carousel__slide{
	flex: 0 0 calc((100% - (var(--sr-recommend-gap) * (var(--sr-recommend-visible) - 1))) / var(--sr-recommend-visible));
	min-width: 0;
	max-width: calc((100% - (var(--sr-recommend-gap) * (var(--sr-recommend-visible) - 1))) / var(--sr-recommend-visible));
}

.sr-recommend-carousel__slide .sr-recommend-card{
	height: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.sr-recommend-carousel__nav{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1.5px solid var(--sr-carousel-accent, #D3CE33);
	border-radius: 999px;
	background: #fff;
	color: var(--sr-carousel-accent, #D3CE33);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sr-carousel-accent, #D3CE33) 18%, transparent);
	transition: background .2s ease, color .2s ease, opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.sr-recommend-carousel__nav:hover:not(:disabled){
	background: var(--sr-carousel-accent, #D3CE33);
	color: #fff;
	transform: translateY(-1px);
}

.sr-recommend-carousel__nav:disabled{
	opacity: .35;
	cursor: default;
	box-shadow: none;
}

@media (max-width: 1023px){
	.sr-recommend-carousel{
		--sr-recommend-visible: 2;
	}
}

@media (max-width: 767px){
	.sr-recommend-carousel{
		--sr-recommend-visible: 1;
		--sr-recommend-gap: .6rem;
		gap: .35rem;
	}

	.sr-recommend-carousel__nav{
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.25rem;
	}
}

/* トップ等：従来SWELLカラム内 voice-card のスマホ横スクロールも維持 */
@media (max-width: 767px){
	.swell-block-columns:has(.voice-card):not(.sr-case-grid) > .swell-block-columns__inner{
		flex-wrap: nowrap;
		margin-left: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: .75rem;
		row-gap: 0;
	}

	.swell-block-columns:has(.voice-card):not(.sr-case-grid) .swell-block-column{
		flex: 0 0 88%;
		width: 88% !important;
		max-width: none;
		margin: 0 .65rem 0 0 !important;
		scroll-snap-align: start;
	}

	.swell-block-columns:has(.voice-card):not(.sr-case-grid) .swell-block-column:last-child{
		margin-right: 0 !important;
	}
}

/* ヘッダーバー：SPでも表示（子テーマの parts/header/head_bar.php で pc_ クラスを外している）。
   親テーマのCSSは元々PC専用のため、ここで幅・折り返し・文字揃えをスマホ向けに調整する。
   .l-header__barInner は justify-content:flex-end のflexコンテナなので、
   PC時は margin-right:auto（親テーマ側で指定済み）で左端に固定している。
   ここで margin を一律リセットすると flex-end に押し戻されてしまうため触らない。 */
.l-header__bar .c-catchphrase{
	text-align:left;
}

@media not all and (min-width:960px){
	.l-header__bar .c-catchphrase{
		width:100%;
		margin-right:0;
		overflow:visible;
		white-space:normal;
		line-height:1.5;
		text-align:center;
		font-size:10px;
	}
}

/* ヘッダーロゴ：整体／美容ページでは「｜次世代整体」のようなサイトラベルを
   ロゴ画像の隣に追加する（functions.phpのswell_parts_head_logoフィルターでspanを挿入）。
   ロゴ画像自体は差し替えず、テキストラベルで表現している。
   横幅に余裕のないSPでは非表示にし、ロゴ画像だけを表示する。 */
.c-headLogo.-img .c-headLogo__link{
	display: flex;
	align-items: flex-end;
	gap: .7em;
}

.c-headLogo__site-label{
	display: none;
	position: relative;
	padding-left: .7em;
	margin-bottom: .35em;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--sr-text-muted, #666);
	white-space: nowrap;
}

.c-headLogo__site-label::before{
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	bottom: .1em;
	width: 1px;
	background: currentColor;
	opacity: .45;
}

@media (min-width: 960px){
	.c-headLogo__site-label{
		display: inline-block;
	}
}

/* フッターロゴ（[serendipity_footer]ショートコード）にも、整体／美容ページでは
   同じサイトラベルを付ける。ロゴ画像・既存のフッターCSS（カスタマイザーの追加CSS）は
   変更せず、#body_wrap.is-site-seitai / is-site-biyou クラス（functions.phpで既に付与済み）を
   使って::afterでテキストを生成するだけにしている。下揃え・文字色はヘッダーロゴラベルと合わせる。 */
.sr-footer__logo{
	display: inline-flex !important;
	align-items: flex-end;
}

.sr-footer__logo::after{
	display: none;
	margin-left: .6em;
	padding-left: .6em;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .12em;
	white-space: nowrap;
	color: var(--sr-text-muted, #666);
	border-left: 1px solid currentColor;
	opacity: .7;
}

@media (min-width: 960px){
	#body_wrap.is-site-seitai .sr-footer__logo::after{
		content: "次世代整体";
		display: inline-block;
	}

	#body_wrap.is-site-biyou .sr-footer__logo::after{
		content: "美容骨盤矯正";
		display: inline-block;
	}
}

/*
 * メインビジュアル：テキストが乗る側だけ薄いグラデーションを画像に重ねて、どの写真でも視認性を確保する（section-fvと同じ #FCF8F9 を使用）。
 * 画像側の .p-mainVisual__slide は親テーマの .c-filterLayer が ::before/::after を
 * 独自の画像リビール演出で使っており、同じ疑似要素に重ねると opacity:0 にリセットされて消えてしまうため、
 * 代わりに未使用の .p-mainVisual__textLayer::before（テキスト側のレイヤー）にグラデーションを敷く。
 * .p-mainVisual__textLayer 自体は .l-container で中央寄せ・幅を絞られているため、
 * inset:0 だと画像の左端との間に隙間ができて不自然になる。
 * 「50% - 50vw」の定番テクニックでビューポート幅いっぱいに広げ、画像の左端にぴったり合わせる。
 */
.p-mainVisual__textLayer::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	z-index: -1;
	background: linear-gradient(100deg, #FCF8F9 0%, rgba(252, 248, 249, .95) 30%, rgba(252, 248, 249, .7) 45%, rgba(252, 248, 249, 0) 65%);
	pointer-events: none;
}

@media (max-width: 767px) {
	.p-mainVisual__textLayer::before {
		background: linear-gradient(0deg, #FCF8F9 0%, rgba(252, 248, 249, .95) 32%, rgba(252, 248, 249, .7) 55%, rgba(252, 248, 249, 0) 82%);
	}
}

/*
 * キャッチコピーの白帯ハイライト（追加CSSの .p-mainVisual__slideTitle .fv-line）を外し、
 * 整体・美容トップ（.section-fv）と同じ「地色に濃色テキスト」のシンプルな見せ方に揃える。
 * 上の白グラデーションで視認性は確保できているため、帯なしでも読める。
 * 追加CSS側は書き換えず、こちらを !important で上書きする形にしている。
 */
.p-mainVisual__slideTitle .fv-line {
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.p-mainVisual__slideText .fv-sub {
	max-width: 620px;
	margin: 20px 0 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.04em;
	color: #444;
}

.p-mainVisual__slideText .fv-sub strong {
	font-weight: 600;
}

/* SP */
@media (max-width: 767px) {
	.p-mainVisual__slideText .fv-sub {
		max-width: 100%;
		margin-top: 16px;
		font-size: 13px;
		line-height: 1.9;
		letter-spacing: 0.02em;
	}
}

/*
 * メインビジュアル：SPの高さをもう少し出して、下寄せのテキストの上に写真の余白を作る。
 * 追加CSS側の .p-mainVisual__inner{min-height:clamp(550px,45vw,800px)} を上書き（!important）。
 */
@media (max-width: 767px) {
	.p-mainVisual__inner {
		min-height: clamp(620px, 150vw, 760px) !important;
	}
}

/*
 * SPの左右パディングをSWELL標準（4vw）より少し狭くする。
 * 対象：960px未満で有効な SWELL本体の :root{--swl-pad_container} を上書き。
 */
@media (max-width: 959px) {
	:root {
		--swl-pad_container: 3vw;
	}
}

/*
 * 予約ページ（page-reserve.php）：ページ自体の見出し（Reserve／ご予約はこちら）と、
 * 直後に続く店舗セクション（同期パターン「shop」）側の「location」ラベルが並んで
 * 二重に見えるため、このページに限り「location」ラベルだけ非表示にする。
 * パターン本体は他ページ（症状ページ下部等）でも使われているため、パターン側は触らない。
 */
.sr-page--reserve .l-mainContent__inner + .swell-block-fullWide .top-section-en {
	display: none;
}

/*
 * 同じ店舗セクションの見出し「名古屋・愛知に6店舗」は、他ページ下部（.sr-page-bottom内）では
 * assets/css/page.css の .sr-page-bottom .top-section-title{font-size:clamp(1.75rem,3vw,2.75rem)}
 * で大きく表示されるが、予約ページはそのラッパーの外にあるため既定の小さいh2サイズのまま。
 * 同じ値を当てて他ページと揃える。
 */
.sr-page--reserve .l-mainContent__inner + .swell-block-fullWide .top-section-title {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	letter-spacing: .04em;
}
/*--------------------
整体⇔美容のクロスリンク（srdp-crosslink、同期パターン）のスマホ表示。
本体スタイルはカスタマイザーの追加CSS側。見出し・リード文の<br>で区切った
1行ぶん（見出し最長15文字・リード文最長21文字＋字間）が画面幅に収まるよう、
画面幅に合わせて文字を縮める（上限は従来の大きさ）。
--------------------*/
@media (max-width: 767px){
	.srdp-crosslink .srdp-crosslink__title{
		/* 追加CSS側が !important で最小27pxを指定しているため !important で上書き */
		font-size: min(27px, calc((100vw - 32px) / 16.5)) !important;
	}
	.srdp-crosslink .srdp-crosslink__lead{
		font-size: min(17px, calc((100vw - 32px) / 22.5));
	}
}

/*--------------------
スマホの改行調整（サイト全体）
・見出し類だけ：行の長さをそろえ（balance）、文節の途中で切らない（auto-phrase）。
  「〜くださ／い」「〜の推／薦」のように末尾に1〜2文字だけ残るのを防ぐ。
・本文・リード文・よくある質問の質問文・リスト項目などは調整せず自然に折り返す。
※ auto-phrase は Chrome/Android、balance は iOS Safari 17.5以降で効く。
--------------------*/
@media (max-width: 767px){
	.l-mainContent :is(h1, h2, h3, h4),
	.l-mainContent :is([class*="__title"], [class*="__catch"], [class*="__heading"]):not([class*="faq"]){
		text-wrap: balance;
		word-break: auto-phrase;
	}
}
@media (max-width: 767px){
	/* 追加CSS側で装飾をunsetしているため個別に指定 */
	.post_content .top-cta .top-cta__title,
	.sr-recommend-single .sr-recommend-single__fv-title{
		text-wrap: balance;
		word-break: auto-phrase;
	}
	/* メディア掲載歴：2列だと「Ray掲／載」のように媒体名が折り返すため1列にする */
	.trust-box .trust-box__history{
		grid-template-columns: 1fr;
	}
	/* ボタンの文言も行の長さをそろえる（本文・抜粋・リスト項目は対象外） */
	body .l-mainContent :is(.sr-btn, .c-btn, .wp-block-button__link){
		text-wrap: balance;
		word-break: auto-phrase;
	}
}

/*
 * 症状名・メニュー名などを途中で改行させない（inc/nowrap-terms.php で <span class="sr-nw"> を付与）。
 * 見出し・名前・ボタンの中だけ。本文は自然に折り返す（言葉ごと次行へ送ると右側が空くため）。
 * span自体は箱を作らない（display: contents）。ボタン等の flex の中で span が別の部品として並び、
 * 「〜改善事例／を／もっと／見る」のように崩れるのを防ぐ（white-space は中の文字に引き継がれる）。
 */
.sr-nw{
	display: contents;
}
:is(h1, h2, h3, h4, [class*="__title"], [class*="__name"], [class*="__catch"], [class*="__heading"], .sr-btn, .c-btn) .sr-nw{
	white-space: nowrap;
}
/*
 * 症状・メニューカード（sympt）の名前：PCでは文字の列が約134pxしかなく
 * 「ストレートネ／ック」「四十肩・五十／肩」のように折れていたため、
 * 右側のイラストの上まではみ出して1行で表示する（文字はイラストより手前）。
 * スマホは従来どおり（単語の途中では改行しない）。
 */
@media (min-width: 768px){
	.sympt .sympt__name{
		white-space: nowrap;
	}
}

/*--------------------
美容トップ「美容骨盤矯正は女性スタッフが対応」（srdp-woman、本体は追加CSS）のスマホ表示。
メッセージ枠を右に寄せて重ねるとテキスト幅が狭く、リード文が4行に折れるため、
枠を横幅いっぱいにし、リード文は<br>区切りの1行（最長12文字）が収まる大きさにする。
--------------------*/
@media (max-width: 767px){
	.srdp-woman .srdp-woman__message{
		width: 100%;
		margin: -24px 0 0;
		padding: 22px 18px;
	}
	.srdp-woman .srdp-woman__head > span{
		display: block;
		margin-top: 6px;
		font-size: 13px;
	}
	.srdp-woman .srdp-woman__lead{
		font-size: min(20px, calc((100vw - 32px - 36px) / 12.6));
		text-wrap: wrap;
	}
}

/*--------------------
スマホの余白調整
・余白付きの全幅ブロックの中に、同じ余白の全幅ブロックが1つだけ入っている箇所
  （美容トップのFV直下など）は上下の余白が二重（約120px）になるため、内側の余白をなくす。
・FV内の最後の空段落（<p><br></p>）を詰める。
--------------------*/
@media (max-width: 767px){
	.swell-block-fullWide.sp-py-40 > .swell-block-fullWide__inner > .swell-block-fullWide.sp-py-40:only-child{
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.section-fv .wp-block-cover__inner-container > p:last-child:has(> br:only-child){
		display: none;
	}
}

/*--------------------
スマホの文字サイズの優先順位（サイト全体）
ページ・セクションごとに見出しの大きさがばらばらで、小見出しがセクション見出しより
大きい箇所（整体トップ「選ばれる理由」の各項目など）があったため、段階をそろえる。
  FVのキャッチ … 各FVのまま（約22px）
  セクション見出し（h2）… 20px
  カード・項目の見出し（h3）… 16px
  質問文・リード … 15px
  本文 … 14px
  ラベル … 11〜12px
本体スタイルは追加CSS側で !important 指定があるため、ここも !important で上書きする。
--------------------*/
@media (max-width: 767px){
	/* セクション見出し */
	.post_content h2.wp-block-heading,
	.post_content .top-cta .top-cta__title,
	.srdp-woman .srdp-woman__title,
	.sr-subsection-heading__title,
	.sr-symptom-solution__title,
	.sr-symptom-approach__title,
	.sr-biyou-treatment__title{
		font-size: 20px !important;
		line-height: 1.5 !important;
	}
	/* FV内の見出しはFVの大きさのまま */
	.post_content .section-fv h2.wp-block-heading{
		font-size: 20px !important;
	}

	/* カード・項目の見出し */
	.srdp-reason .srdp-reason__point-title,
	.reason-card__title,
	.srdp-flow h3.srdp-flow__title,
	.post_content .srdp-flow__title,
	.srdp-beauty-feature__body h3,
	.sympt__name,
	.srdp-seitai-guide__title,
	.trust-box__title,
	.sr-biyou-treatment__intro-heading,
	.sr-biyou-treatment__step-subtitle,
	.sr-symptom-approach__item-title{
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	/* 監修者の名前（セクション見出しより大きかったため） */
	.srdp-supervisor .srdp-supervisor__name{
		font-size: 18px !important;
	}

	/* 質問文・リード */
	.srdp-faq__title,
	.sr-faq__title,
	.srdp-faq__question,
	.sr-faq__question,
	.sr-symptom-fv__lead{
		font-size: 15px !important;
	}

	/* 小さすぎた名前・ラベル・ナビ */
	.sr-recommend-card__name{
		font-size: 14px !important;
	}
	.sr-biyou-nav__accordion-summary,
	.sr-symptom-nav__accordion-summary{
		font-size: 14px !important;
	}
	.voice-card__fact-label{
		font-size: 11px !important;
	}

	/* 整体トップ「選ばれる理由」：見出し下の大きな空き（約160px）と、大きすぎる番号を詰める */
	.srdp-reason{
		padding-top: 0 !important; /* 見出しグループ側の下余白（約60px）と二重になるため */
		padding-bottom: 48px !important;
	}
	.srdp-reason .srdp-reason__point:first-child{
		padding-top: 0 !important;
	}
	.srdp-reason .srdp-reason__point{
		padding: 20px 0 24px !important;
	}
	.srdp-reason .srdp-reason__num{
		top: 0 !important;
		font-size: 64px !important;
	}
	.srdp-reason .srdp-reason__point-title{
		margin-bottom: 10px !important;
		padding-right: 56px !important; /* 番号と重ならないように */
	}
	.srdp-reason .srdp-reason__body{
		gap: 32px !important;
	}
}

/*--------------------
1文ごとに改行して入力された本文（serendipity_format_body_text）
PCは入力どおり改行、スマホは改行せず続けて流す（短い行が続いて右側が空くのを防ぐ）。
「* 」で始まる行は箇条書きとして表示する。
--------------------*/
.sr-text-list{
	margin: .6em 0 .9em;
	padding-left: 1.3em;
	list-style: disc;
}
.sr-text-list li{
	margin: .2em 0;
}
@media (max-width: 767px){
	.sr-pc-br{
		display: none;
	}
	.sr-symptom-approach__text,
	.sr-biyou-treatment__step-text{
		font-size: 14px !important;
		line-height: 1.85 !important;
	}
	.sr-symptom-approach__text p + p,
	.sr-biyou-treatment__step-text p + p{
		margin-top: .8em;
	}
}

/*--------------------
店舗詳細のタイトル（例：次世代整体・美容骨盤矯正 Serendipity 日進赤池店）をPCで1行に収める。
最長のタイトルは約24文字分の幅（文字サイズの約24.1倍）。見出しの最大幅900pxに収まる大きさにする。
スマホは従来どおり。
--------------------*/
@media (min-width: 768px){
	.single-shop .sr-shop__header .sr-section-heading__title{
		font-size: clamp(1.75rem, 2.8vw, 2.25rem);
	}
}

/*--------------------
スマホ：本文の単独の手動改行（<br class="sr-br">、inc/nowrap-terms.php で付与）は改行しない。
PC向けに入れた改行がスマホで「〜変化な／ど、」のような短い行を作るため、自然に折り返す。
見出し・ボタン・FV・キャッチ・表（住所・営業時間など）の改行は残す。2つ続く改行（段落の区切り）も残る。
--------------------*/
@media (max-width: 767px){
	.sr-br{
		display: none;
	}
	:is(h1, h2, h3, h4, [class*="__title"], [class*="__catch"], [class*="__heading"], [class*="fv__title"], .section-fv, .srdp-woman__lead, .srdp-crosslink__lead, .top-cta, [class*="mainVisual"], .sympt, .jnm-ml__action, [class*="tagline"], .srdp-price__feature, [class*="intro-lead"], .sr-btn, .c-btn, .wp-block-button, dt, dd, th, td, address, .l-header, .l-footer, .w-beforeFooter) .sr-br{
		display: inline;
	}
}

/*--------------------
スマホ：中央寄せの説明文（has-text-align-center）は本文と同じ14pxに。
SWELLの本文サイズは画面幅で伸びる（約15〜16.5px）ため、見出し直下の説明文が大きく見えていた。
文字サイズを個別に指定した段落（has-small-font-size 等）は対象外。
--------------------*/
@media (max-width: 767px){
	.post_content p.has-text-align-center.wp-block-paragraph:not([class*="font-size"]):not(.top-section-en){
		font-size: 14px;
	}
	/* 本文中でSWELLの文字サイズ機能（span.swl-fz に font-size:20px 等を直接指定）が使われている箇所も、
	   スマホでは段落と同じ大きさにする（美容トップ「BEAUTY APPROACH」の説明文など。PCは指定どおり） */
	.post_content p.has-text-align-center .swl-fz{
		font-size: inherit !important;
	}
}

/*--------------------
整体・美容トップFV（section-fv）スマホ：「写真を全面に敷き、下に白いボックスで文章を重ねる」デザイン。
（写真の上寄せ切り抜きは美容トップ＝section-fv--portrait のみ）
補足文が長いため、FVの高さを「画面の高さ − ヘッダー（約84px）− 下部固定ボタン（約64px）」にして
写真・文章・ボタンを最初の1画面に収める（従来の高さ75svh指定より優先）。
文字サイズは見出し20px・本文14px（縦が短い画面は下で詰める）。
--------------------*/
@media (max-width: 767px){
	.section-fv{
		height: auto !important;
		min-height: calc(100svh - 84px - 64px - env(safe-area-inset-bottom)) !important;
	}
	.section-fv.section-fv--portrait .wp-block-cover__image-background{
		object-position: center 8% !important;
	}
	/* FV内の最後の空段落の余白で写真が隠れる範囲が広がらないように */
	.section-fv .wp-block-cover__inner-container > *:nth-last-child(2):has(+ p:has(> br:only-child)){
		margin-bottom: 0 !important;
	}
}
/* 整体・美容トップFV：縦が短い画面（iPhone SE 等）は、文章ボックスで写真が隠れないよう文字と余白を少し詰める */
@media (max-width: 767px) and (max-height: 760px){
	.section-fv.section-fv--portrait .wp-block-cover__image-background{
		object-position: center 0% !important;
	}
	.section-fv h2.section-fv__title.section-fv__title{
		font-size: 16px !important;
		line-height: 1.5 !important;
		margin-bottom: 6px !important;
		text-wrap: wrap;
	}
	.section-fv .section-fv__text{
		font-size: 13px !important;
		line-height: 1.7 !important;
	}
	.section-fv .wp-block-cover__inner-container > :first-child{
		margin-bottom: 12px !important;
	}
	.section-fv .wp-block-cover__inner-container .wp-block-group.alignwide{
		padding: 12px 14px !important;
	}
}

/* スマホのドロワーメニュー：下部固定CTA（約64px）と最後の項目が重ならないよう、その分の余白を下に足す */
@media (max-width: 767px){
	.p-spMenu .p-spMenu__body{
		padding-bottom: calc(64px + 32px + env(safe-area-inset-bottom)) !important;
	}
}

/* 整体ページの店舗一覧の注記（次世代整体の対応店舗。template-parts/shop-section-cards.php） */
.jnm-ml__note{
	margin: 0 auto 20px;
	max-width: 760px;
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
	color: #666;
}

/*--------------------
ページごとのCTA文言（serendipity_get_page_cta）
・CTA直前の一文（ブライダルの日程・医療機関を優先する案内など）
・SP追従CTAは文言が長いページがあるため2行まで折り返す（従来は1行固定）
--------------------*/
.top-cta .top-cta__note{
	max-width: 640px;
	margin: 18px auto 0;
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
	color: inherit;
	opacity: .9;
}
@media (max-width: 767px){
	.sr-sticky-cta .sr-sticky-cta__btn{
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: .45em .5em;
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
		text-align: center;
		text-wrap: balance;
		word-break: auto-phrase;
	}
	.top-cta .top-cta__note{
		font-size: 13px;
		text-align: left;
	}
}

/* フッター：会社概要・プライバシーポリシーへのリンク（functions.php の swell_after_copyright）。
   出力はコピーライトの後ろだが、表示はコピーライトの上にする。 */
.l-footer__foot .l-container{
	display: flex;
	flex-direction: column;
}
.l-footer__foot .l-footer__nav{
	order: 1;
}
.l-footer__foot .sr-footer-legal{
	order: 2;
}
.l-footer__foot .copyright{
	order: 3;
}
.sr-footer-legal{
	margin: 0 0 6px;
	font-size: 12px;
	text-align: center;
}
.sr-footer-legal a{
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 会社概要の表（/company） */
.sr-company-table th{
	width: 28%;
	white-space: nowrap;
	background: #f7f7f5;
	font-weight: 600;
}
@media (max-width: 767px){
	.sr-company-table th{
		width: 6em;
		white-space: nowrap;
	}
}

/* 会社概要・プライバシーポリシー：本文とフッターの間に余白を取る */
.sr-legal-page .l-mainContent{
	padding-bottom: 80px;
}
@media (max-width: 767px){
	.sr-legal-page .l-mainContent{
		padding-bottom: 56px;
	}
}

/*--------------------
よくある質問 詳細（single-faq.php）／404（404.php）
SWELL標準のブログ表示を使わないシンプルな構成。
--------------------*/
.sr-faq-single .l-mainContent__inner,
.sr-404 .l-mainContent__inner{
	max-width: 860px;
	margin: 0 auto;
	padding-top: 48px;
	padding-bottom: 64px;
}
.sr-faq-single__item{
	margin: 28px 0 0;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid rgba(41, 41, 37, .1);
	border-radius: 6px;
}
.sr-faq-single__q,
.sr-faq-single__a{
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 14px;
	align-items: start;
}
.sr-faq-single__a{
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed rgba(41, 41, 37, .15);
}
.sr-faq-single__mark{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color_main, #5b8c2a);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}
.sr-faq-single__mark--a{
	background: #fff;
	color: var(--color_main, #5b8c2a);
	border: 1px solid currentColor;
}
.sr-faq-single .sr-faq-single__question{
	margin: 4px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 20px !important;
	font-weight: 700;
	line-height: 1.6;
	color: #292925;
}
.sr-faq-single .sr-faq-single__question::before,
.sr-faq-single .sr-faq-single__question::after,
.sr-faq-single .sr-faq-single__related-title::before,
.sr-faq-single .sr-faq-single__related-title::after{
	content: none !important;
	display: none !important;
}
.sr-faq-single__answer{
	padding-top: 4px;
}
.sr-faq-single__related{
	margin-top: 48px;
}
.sr-faq-single .sr-faq-single__related-title{
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 17px !important;
	color: #292925;
}
.sr-faq-single__related-list,
.sr-404__links{
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(41, 41, 37, .1);
}
.sr-faq-single__related-list li,
.sr-404__links li{
	border-bottom: 1px solid rgba(41, 41, 37, .1);
}
.sr-faq-single__related-list a,
.sr-404__links a{
	position: relative;
	display: block;
	padding: 14px 28px 14px 4px;
	color: #292925;
	text-decoration: none;
	line-height: 1.6;
}
.sr-faq-single__related-list a::after,
.sr-404__links a::after{
	content: "→";
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	color: var(--color_main, #5b8c2a);
}
.sr-faq-single__back{
	margin: 40px 0 0;
	text-align: center;
}
.sr-404__links{
	margin-top: 32px;
}
@media (max-width: 767px){
	.sr-faq-single .l-mainContent__inner,
	.sr-404 .l-mainContent__inner{
		padding-top: 32px;
		padding-bottom: 48px;
	}
	.sr-faq-single__item{
		padding: 20px 16px;
	}
	.sr-faq-single__q,
	.sr-faq-single__a{
		grid-template-columns: 30px 1fr;
		gap: 10px;
	}
	.sr-faq-single__mark{
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
	.sr-faq-single .sr-faq-single__question{
		font-size: 17px !important;
	}
}

/* SP：本文として読ませる小さめテキストの下限を引き上げ（お客様の声・スタッフカード） */
@media (max-width: 767px){
	.voice-card__result-text{
		font-size: 13px;
	}
	.sr-case-carousel .voice-card__profile{
		font-size: 11px;
	}
	.sr-shop-staff .sr-shop-staff__tagline{
		font-size: 13px;
	}
	.sr-shop-staff .sr-shop-staff__menus{
		font-size: 12px;
	}
}

/* 整体TOP 料金の特徴：3項目（技術保証の削除後）。PCは3列、SPは2列＋3つ目を全幅に */
.srdp-price .srdp-price__features--3{
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px){
	.srdp-price .srdp-price__features--3{
		grid-template-columns: repeat(2, 1fr);
	}
	.srdp-price .srdp-price__features--3 .srdp-price__feature:nth-child(3){
		grid-column: 1 / -1;
	}
}

/* TOP「選ばれる理由」国家資格スタッフ枠：小さすぎて読めない文字を本文とのバランスを見て拡大（ページ内<style>より後勝ちさせる） */
.reason-mosaic .reason-license .reason-license__label{
	font-size: 12px;
	opacity: .7;
}
.post_content .reason-mosaic .reason-license .reason-license__title{
	font-size: 20px;
}
.reason-mosaic .reason-license .reason-license__lead{
	font-size: 15px;
	line-height: 1.85;
}
.reason-mosaic .reason-license .reason-license__qualification{
	font-size: 15px;
}
.reason-mosaic .license-staff .license-staff__license{
	font-size: 12px;
	opacity: .75;
}
.reason-mosaic .license-staff .license-staff__name{
	font-size: 15px;
}
.reason-mosaic .license-staff .license-staff__shop{
	font-size: 13px;
	opacity: .8;
}
.reason-mosaic .reason-license .reason-license__note{
	font-size: 13px;
	opacity: .8;
}
@media (max-width: 767px){
	.reason-mosaic .reason-license .reason-license__label{
		font-size: 11px;
	}
	.post_content .reason-mosaic .reason-license .reason-license__title{
		font-size: 17px;
	}
	.reason-mosaic .reason-license .reason-license__lead{
		font-size: 14px;
	}
	.reason-mosaic .reason-license .reason-license__qualification{
		font-size: 14px;
	}
	.reason-mosaic .license-staff .license-staff__license{
		font-size: 11px;
	}
	.reason-mosaic .license-staff .license-staff__name{
		font-size: 13px;
	}
	.reason-mosaic .license-staff .license-staff__shop{
		font-size: 12px;
	}
	.reason-mosaic .reason-license .reason-license__note{
		font-size: 12px;
	}
}

/* CTAボタン文言：「|」区切りの単位（.sr-cta-chunk）ごとに折り返す。
   収まる幅なら1行のまま、足りないときだけ区切り位置で改行し、文の途中では切らない */
.sr-cta-chunk{
	display: inline-block;
	max-width: 100%;
}
.top-cta__button > span:first-child{
	text-align: center;
	text-wrap: balance;
}
/* 追従CTA・サイドバーのボタンは flex のため、区切り単位が横に潰れないよう折り返しを許可 */
.sr-sticky-cta .sr-sticky-cta__btn,
.sr-biyou-nav__btn,
.sr-biyou-nav__shop-link,
.sr-symptom-nav__btn,
.sr-symptom-nav__shop-link{
	flex-wrap: wrap;
	align-content: center;
}

/* SP：本文として読む小さな文字の下限（注記・タグ・推薦文の抜粋・リンク文言） */
@media (max-width: 767px){
	body .sr-case-disclaimer,
	body .sr-recommend-card__excerpt,
	body .sr-shop-staff .sr-shop-staff__link{
		font-size: 12px;
	}
	body .voice-card .voice-card__support,
	body .voice-card .voice-card__fact-items .voice-card__tag,
	body .sr-shop-features__note,
	body .sr-recommend-archive__affiliation,
	body .sr-recommend-single__topics,
	body .sr-recommend-single__topics-list li,
	body .sr-recommend-single__topics-label,
	body .sr-staff-detail__related-label{
		font-size: 11px;
	}
}

/* ======================================================
   ブライダルページ専用（先方チェックシート：ブライダル）
   ====================================================== */
/* FV：開始時期の目安を目立たせる */
.sr-bridal-timing{
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem 1.1rem;
	border: 1px solid #E68E9C;
	border-radius: 10px;
	background: #fff;
	text-align: left;
}
.sr-bridal-timing__label{
	display: inline-block;
	margin: 0 0 .4rem;
	padding: .15em .7em;
	border-radius: 999px;
	background: #E68E9C;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
}
.sr-bridal-timing__main{
	margin: 0;
	color: #292925;
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	font-weight: 700;
	line-height: 1.6;
}
.sr-bridal-timing__main strong{
	color: #D86F80;
	font-size: 1.15em;
}
.sr-bridal-timing__text{
	margin: .35rem 0 0;
	color: #555;
	font-size: 14px;
	line-height: 1.8;
}

/* カウンセリング */
.sr-bridal-counseling{
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 3vw, 2.25rem);
	border-radius: 16px;
	background: #FCF1F3;
}
.sr-bridal-counseling__head{
	text-align: center;
}
.sr-bridal-counseling__eyebrow{
	margin: 0 0 .35rem;
	color: #E68E9C;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
}
.post_content .sr-bridal-counseling__title,
.sr-bridal-counseling__title{
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	background: none;
	color: #292925;
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
	line-height: 1.6;
}
.sr-bridal-counseling__title::before,
.sr-bridal-counseling__title::after,
.sr-bridal-counseling__label::before,
.sr-bridal-counseling__label::after{
	display: none !important;
}
.sr-bridal-counseling__lead{
	max-width: 40em;
	margin: 0 auto;
	color: #444;
	font-size: 15px;
	line-height: 1.9;
	text-align: left;
}
.sr-bridal-counseling__body{
	display: grid;
	gap: 1.5rem;
	margin-top: 1.75rem;
	align-items: start;
}
@media (min-width: 768px){
	.sr-bridal-counseling__body{
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 2rem;
	}
}
.sr-bridal-counseling__image{
	margin: 0 auto;
	max-width: 15rem;
}
.sr-bridal-counseling__image img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}
.sr-bridal-counseling__lists{
	display: grid;
	gap: 1.5rem;
}
.post_content .sr-bridal-counseling__label,
.sr-bridal-counseling__label{
	margin: 0 0 .75rem;
	padding: 0 0 0 .75rem;
	border: 0;
	border-left: 3px solid #E68E9C;
	background: none;
	color: #292925;
	font-size: 16px;
	line-height: 1.5;
}
.sr-bridal-counseling__checks,
.sr-bridal-counseling__parts{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sr-bridal-counseling__checks li,
.sr-bridal-counseling__parts li{
	margin: 0;
	padding: .35em .85em;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.5;
}
.sr-bridal-counseling__checks li{
	border: 1px solid rgba(41, 41, 37, .15);
	background: #fff;
	color: #333;
}
.sr-bridal-counseling__checks li::before{
	content: "✓";
	margin-right: .35em;
	color: #E68E9C;
	font-weight: 700;
}
.sr-bridal-counseling__parts li{
	border: 1px solid #E68E9C;
	background: #fff;
	color: #C25B6C;
	font-weight: 600;
}
.sr-bridal-counseling__note{
	margin: .85rem 0 0;
	color: #555;
	font-size: 14px;
	line-height: 1.8;
}

/* 3本柱：アイコンを出さないため左列を細く */
@media (min-width: 768px){
	.sr-biyou-treatment--bridal .sr-biyou-treatment__step{
		grid-template-columns: 13rem minmax(0, 1fr);
	}
}
.sr-biyou-treatment--bridal .sr-biyou-treatment__step-meta{
	min-height: 0;
}
@media (max-width: 767px){
	.sr-bridal-counseling__image{
		max-width: 10rem;
	}
}

/* PCヘッダーのLINEボタン：1024〜1365px幅で文字が2〜4行に折り返していたため1行に固定 */
.l-header .swell-block-button__link{
	white-space: nowrap;
}
@media (min-width: 960px) and (max-width: 1365px){
	.l-header .swell-block-button__link{
		min-width: 0 !important;
		padding-left: 1.1em !important;
		padding-right: 1.1em !important;
		font-size: 14px !important;
	}
}

.sr-faq-archive__cta-note{
	margin: .85rem 0 0;
	color: #555;
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

/*--------------------
SP：日本語のラベル・注記が9〜10pxで読みにくかったため、最小11px程度に揃える（英字の飾り見出しは対象外）
--------------------*/
@media (max-width: 599px) {
	.sr-biyou-staff-note__notice,
	.sr-recommend-card__affiliation,
	.sr-recommend-card__position,
	.sr-shop__meta dt,
	.sr-case-overview dt,
	.sr-shop-card dt,
	.sr-staff-rep__eyebrow,
	.sr-shop-staff__badge,
	.sr-staff-detail__quals-label,
	.sr-case-meta__label,
	.sr-case-meta__cat,
	.sr-case-meta__cat a,
	.sr-case-stats__label,
	.sr-related__cats{
		font-size: 11px !important;
	}
}

/* FV見出しの最終行に「へ。」など1〜2文字だけが残る折り返しを防ぐ（対応ブラウザのみ。非対応でも従来どおり表示） */
.sr-biyou-fv__title,
.sr-symptom-fv__title{
	word-break: auto-phrase;
	text-wrap: pretty;
}

/* 見出しの折り返し位置の指定：.sr-chunk の単位ごとに折り返す（収まる幅なら1行のまま、文の途中では切らない） */
.sr-chunk{
	display: inline-block;
	max-width: 100%;
}