/* ========================================
   整体・症状詳細ページ
======================================== */

/* ワイド幅（記事幅ではなくコンテナ幅） */
.sr-page--seitai.l-mainContent{
	max-width: none;
}

.sr-page--seitai > .l-mainContent__inner.sr-symptom-layout{
	width: 100%;
	max-width: calc(var(--container_size, 1120px) + var(--swl-pad_container, 0px) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--swl-pad_container, 0);
	padding-right: var(--swl-pad_container, 0);
	box-sizing: border-box;
}

.sr-symptom-layout__main > * + *{
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* 整体トップへ戻る */
.sr-symptom-back{
	margin: 0;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.sr-symptom-back__link{
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--color_main, #2c5f4f);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.sr-symptom-back__link:hover,
.sr-symptom-back__link:focus-visible{
	color: var(--color_main, #2c5f4f);
	border-bottom-color: currentColor;
	opacity: .85;
}

.sr-symptom-back__icon{
	font-size: 1em;
	line-height: 1;
}

/* 推薦セクション内の二重コンテナを打ち消し */
.sr-symptom-layout__main .sr-recommend--page .l-mainContent__inner{
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ----------------------------------------
   ① FV
---------------------------------------- */
.sr-symptom-fv__inner{
	padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	border-bottom: 1px solid var(--sr-border, rgba(41, 41, 37, .1));
}

.sr-symptom-fv__eyebrow{
	margin: 0 0 12px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--btn-main, var(--sr-accent, #D3CE33));
}

.sr-symptom-fv__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, #292925);
}

/* SPでは症状名が長いタイトルで折り返しが崩れることがあるため、2px分だけ縮小 */
@media (max-width: 767px){
	.sr-symptom-fv__title{
		font-size: 1.625rem; /* 28px -> 26px */
	}
}

/*
 * 「名古屋・愛知で／〇〇に／お悩みなら…」のかたまり（template-parts/symptom/fv.php）。
 * PC：かたまりの途中では改行しない。SP：3行にそろえる。
 */
.sr-symptom-fv__title-line{
	display: inline-block;
}
@media (max-width: 767px){
	.sr-symptom-fv__title-line{
		display: block;
	}
}

.sr-symptom-fv__subtitle{
	margin: .85rem 0 0;
	font-size: clamp(1rem, 1.8vw, 1.125rem);
	font-weight: 600;
	line-height: 1.6;
	color: var(--sr-text, #292925);
}

.sr-symptom-fv__lead{
	margin: 1rem 0 0;
	max-width: 42em;
	font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
	line-height: 1.9;
	color: var(--sr-text-muted, #666);
}

/* イラスト付きFV（背景ではなくはっきり見せる） */
.sr-symptom-fv--has-illust .sr-symptom-fv__inner{
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: center;
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.sr-symptom-fv__illust{
	margin: 0;
	width: 100%;
	max-width: 14rem;
	justify-self: center;
}

.sr-symptom-fv__illust-image{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

@media (min-width: 768px){
	.sr-symptom-fv--has-illust .sr-symptom-fv__inner{
		grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr);
		gap: 0;
		padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
	}

	.sr-symptom-fv__illust{
		max-width: 14.5rem;
		justify-self: end;
	}

	.sr-symptom-fv--has-illust .sr-symptom-fv__lead{
		max-width: 36em;
	}
}

/* ----------------------------------------
   ② お悩みチェック
---------------------------------------- */
.sr-symptom-worries__list{
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .55rem;
}

@media (min-width: 768px){
	.sr-symptom-worries__list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .65rem 1.5rem;
	}
}

.sr-symptom-worries__item{
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	margin: 0;
	padding: .85rem 0;
	border-bottom: 1px solid var(--sr-border, rgba(41, 41, 37, .1));
}

.sr-symptom-worries__mark{
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: .12rem;
	border-radius: 50%;
	background: var(--sr-accent, #D3CE33);
	color: #fff;
}

.sr-symptom-worries__mark::before{
	content: "";
	width: .34em;
	height: .58em;
	margin-top: -.08em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.sr-symptom-worries__text{
	flex: 1;
	min-width: 0;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.65;
	color: var(--sr-text, #292925);
}

/* ----------------------------------------
   ③ 固定解決メッセージ
---------------------------------------- */
.sr-symptom-solution{
	padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
	text-align: center;
}

.sr-symptom-solution__title{
	margin: 0;
	width: 100%;
	max-width: none;
	font-size: clamp(1.2rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .04em;
	color: var(--sr-text, #292925);
	text-wrap: balance;
}

/* ----------------------------------------
   ④ 共通アプローチ
---------------------------------------- */
.sr-symptom-approach__head{
	margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
	text-align: center;
}

.sr-symptom-approach__title{
	margin: 0;
	font-size: clamp(1.3rem, 3.2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--sr-text, #292925);
	text-wrap: balance;
}

.sr-symptom-approach__keywords{
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	color: var(--btn-main, var(--sr-accent, #D3CE33));
}

.sr-symptom-approach__subtitle{
	margin: .85rem auto 0;
	max-width: 34em;
	font-size: clamp(.9375rem, 1.7vw, 1.0625rem);
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: .02em;
	color: var(--sr-text, #292925);
}

.sr-symptom-approach__intro{
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	max-width: 42em;
	width: 100%;
}

.sr-symptom-approach__intro-break{
	display: block;
	height: .5em;
}

.sr-symptom-approach__diagram{
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	text-align: center;
}

.sr-symptom-approach__diagram img{
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
}

.sr-symptom-approach__intro-text{
	margin: 0 0 .65rem;
	font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
	line-height: 1.95;
	color: var(--sr-text-muted, #666);
}

.sr-symptom-approach__intro-text:last-of-type{
	margin-bottom: 0;
}

.sr-symptom-approach__intro-extra{
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
	line-height: 1.95;
	color: var(--sr-text-muted, #666);
	border-top: 1px solid var(--sr-border, rgba(41, 41, 37, .1));
}

.sr-symptom-approach__list{
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 3.5rem);
}

.sr-symptom-approach__item{
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem 2rem;
	padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	border-top: 1px solid var(--sr-border, rgba(41, 41, 37, .12));
	overflow: visible;
}

@media (min-width: 768px){
	.sr-symptom-approach__item{
		grid-template-columns: 8.5rem minmax(0, 1fr);
		align-items: start;
		gap: 1.25rem 2.75rem;
		padding-top: clamp(2rem, 4vw, 2.75rem);
	}

	.sr-symptom-approach__item--has-icon{
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: 1rem 1.25rem;
	}
}

.sr-symptom-approach__meta{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	min-height: 4.5rem;
}

.sr-symptom-approach__item--has-icon .sr-symptom-approach__meta{
	align-items: center;
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	min-height: 4.5rem;
	gap: .45rem;
	text-align: center;
}

.sr-symptom-approach__icon{
	position: relative;
	z-index: 1;
	margin: .35rem 0 0;
	width: clamp(12rem, 42vw, 16rem);
}

.sr-symptom-approach__icon img{
	display: block;
	width: 100%;
	height: auto;
}

.sr-symptom-approach__num{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	font-size: clamp(4.5rem, 12vw, 7.5rem);
	font-weight: 700;
	line-height: .85;
	letter-spacing: -.02em;
	color: var(--sr-text, #292925);
	opacity: .07;
	pointer-events: none;
	user-select: none;
}

.sr-symptom-approach__item--has-icon .sr-symptom-approach__num{
	left: 50%;
	transform: translateX(-50%);
}

.sr-symptom-approach__item--has-icon .sr-symptom-approach__num-mark{
	display: block;
	background: none;
	color: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}

@media (min-width: 768px){
	.sr-symptom-approach__num{
		font-size: clamp(5.5rem, 8vw, 8rem);
	}
}

.sr-symptom-approach__label{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .2rem;
	margin: 0;
}

.sr-symptom-approach__item--has-icon .sr-symptom-approach__label{
	align-items: center;
}

.sr-symptom-approach__label-ja{
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--sr-text, #292925);
}

.sr-symptom-approach__item--has-icon .sr-symptom-approach__label-ja{
	font-size: clamp(1.25rem, 2vw, 1.375rem);
}

.sr-symptom-approach__label-en{
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--btn-main, var(--sr-accent, #D3CE33));
}

.sr-symptom-approach__body{
	position: relative;
	z-index: 1;
	min-width: 0;
	max-width: none;
	width: 100%;
}

.sr-symptom-approach__item-title{
	margin: 0 0 1rem;
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .02em;
	color: var(--sr-text, #292925);
}

.sr-symptom-approach__text{
	font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
	line-height: 1.95;
	color: var(--sr-text-muted, #666);
}

.sr-symptom-approach__text > p{
	margin: 0 0 .9rem;
}

.sr-symptom-approach__text > p:last-child{
	margin-bottom: 0;
}

.sr-symptom-approach__text-extra{
	margin-top: .9rem;
}

.sr-symptom-approach__reason{
	margin-top: 1.35rem;
	padding: 1.1rem 1.2rem;
	background: var(--sr-accent-soft, rgba(211, 206, 51, .08));
}

.sr-symptom-approach__reason-label{
	display: block;
	margin-bottom: .4rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sr-text, #292925);
}

.sr-symptom-approach__reason-text{
	margin: 0;
	font-size: .9375rem;
	line-height: 1.85;
	color: var(--sr-text-muted, #666);
}

/* アクセント塗りつぶし上の文字は白 */
.sr-page--seitai .sr-btn--primary,
.sr-symptom-layout .sr-btn--primary{
	color: #fff;
}

.sr-page--seitai .sr-btn--primary:hover,
.sr-symptom-layout .sr-btn--primary:hover{
	color: #fff;
}

/* ----------------------------------------
   ⑤ 本文
---------------------------------------- */
.sr-symptom-content{
	margin-bottom: 0;
}

.sr-symptom-content > *:first-child{
	margin-top: 0;
}

/* ----------------------------------------
   ⑥ 改善事例 / ⑦ FAQ
---------------------------------------- */
.sr-symptom-cases__more,
.sr-symptom-faq__more{
	margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
	text-align: center;
}

/* ----------------------------------------
   カテゴリ別お悩み一覧（otherページ専用）
---------------------------------------- */
.sr-symptom-other-categories__heading{
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.sr-symptom-other-categories__grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 640px){
	.sr-symptom-other-categories__grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px){
	.sr-symptom-other-categories__grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sr-symptom-other-categories__card{
	padding: 1.5rem 1.5rem 1.75rem;
	border-radius: 4px;
}

.sr-symptom-other-categories__card-title{
	margin: 0 0 1rem;
	padding-bottom: .85rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sr-text, #292925);
	border-bottom: 2px solid var(--sr-accent, #D3CE33);
}

.sr-symptom-other-categories__list{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.sr-symptom-other-categories__item{
	position: relative;
	padding-left: 1.1em;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--sr-text-muted, #666);
}

.sr-symptom-other-categories__item::before{
	content: "";
	position: absolute;
	left: 0;
	top: .68em;
	width: .4em;
	height: .4em;
	border-radius: 50%;
	background: var(--btn-main, var(--sr-accent, #D3CE33));
}

/* ----------------------------------------
   医療機関受診のご案内（otherページ専用）
---------------------------------------- */
.sr-symptom-medical-notice{
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--sr-bg-soft);
	border: 1px solid var(--sr-border, rgba(41, 41, 37, .1));
	border-left: 4px solid var(--btn-main, var(--sr-accent, #D3CE33));
	border-radius: 4px;
}

.sr-symptom-medical-notice__body p{
	margin: 0 0 .85em;
	font-size: .9375rem;
	line-height: 1.9;
	color: var(--sr-text-muted, #666);
}

.sr-symptom-medical-notice__body p:last-child{
	margin-bottom: 0;
}

/* 医療機関との役割分担（見出し・医療機関を優先するケースの箇条書き） */
.sr-symptom-medical-notice__title{
	margin: 0 0 .9em !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 1.125rem !important;
	font-weight: 700;
	line-height: 1.6;
	color: var(--sr-text, #292925);
}
.sr-symptom-medical-notice__title::before,
.sr-symptom-medical-notice__title::after{
	content: none !important;
	display: none !important;
}
.sr-symptom-medical-notice__body .sr-text-list{
	margin: .2em 0 1em;
	padding: .9em 1em .9em 2.2em;
	background: #fff;
	border-radius: 4px;
	font-size: .9375rem;
	line-height: 1.8;
	color: var(--sr-text, #292925);
}
.sr-symptom-medical-notice__body strong{
	color: var(--sr-text, #292925);
}
@media (max-width: 767px){
	.sr-symptom-medical-notice__title{
		font-size: 16px !important;
	}
}
