@charset "utf-8";
/* ===================================================
   ソフィアパレス LP専用カスタムスタイル
   ブランド規定：ブラウン#572d16 × ゴールド#ffeaa5
   ボタン：白(#ffffff)→金(#c39000) グラデーション
   =================================================== */

/* 強調テキスト（モトヤゴチカ相当） */
strong, em, b, .emphasis {
	font-family: var(--emphasis-font);
	font-style: normal;
	color: var(--accent-color);
}

/* #why-us（WHY SOPHIA PALACE）はbg1-accent-parts＝背景がaccent-colorのため、
   strongの文字色をaccent-colorのままにすると背景と同化して見えなくなる。
   2026-08-07指摘のため、このセクション内だけ文字色をprimary-colorに変更。*/
#why-us strong {
	color: var(--primary-color);
}

/* 英字・数字（Times New Roman） */
.en, .num, .price, .accent-font {
	font-family: var(--accent-font);
}

/* ボタン：白→金グラデーション */
.btn a,
.btn.accent a {
	background: var(--btn-gradient);
	color: var(--primary-color) !important;
	border: 1px solid #c39000;
	font-weight: bold;
	box-shadow: 0 4px 14px rgba(195,144,0,0.35);
	transition: transform .25s ease, box-shadow .25s ease;
}
.btn a:hover,
.btn.accent a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(195,144,0,0.5);
}
.btn.inverse a {
	background: transparent;
	color: var(--primary-color) !important;
	border: 1px solid var(--accent-color);
	box-shadow: none;
}
/* 暗い背景（CTAボックス・オファーカード）の中では白文字に切り替え */
.cta-box .btn.inverse a,
.offer-card .btn.inverse a {
	color: #fff !important;
	border: 1px solid var(--gold-color);
}

/* オファー価格バッジ
   2026-08-05 予約ボタンと同じ金グラデーションだったため紛らわしいとの指摘。
   ボタンと誤認されないよう、枠線のみのシンプルなタグに変更。*/
.offer-badge {
	display: inline-block;
	background: transparent;
	color: var(--primary-color);
	font-family: var(--emphasis-font);
	font-weight: bold;
	padding: 0.25rem 1.1rem;
	border: 1px solid var(--accent-color);
	border-radius: 999px;
	font-size: 0.8rem;
	margin-bottom: 0.6rem;
	text-align: center;	/*2026-08-07 flex中で幅が伸びた際に枠内で文字が左寄りになる指摘のため追加*/
}
.offer-price {
	font-family: var(--accent-font);
	font-weight: bold;
	color: var(--accent-color);
}
.offer-price .yen-num {
	font-size: 1.6em;
}

/* 共感セクション */
.sympathy-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}
.sympathy-list li {
	background: var(--light-color);
	border: 1px solid var(--light-border-color);
	border-radius: 12px;
	padding: 1.5rem;
	width: 260px;
	text-align: center;
}
.sympathy-list li .icon {
	font-size: 2rem;
	color: var(--accent-color);
	margin-bottom: 0.6rem;
}

/* 3ステップ根拠セクション */
.step-flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 2.5rem 0;
}
.step-flow .step {
	background: #fff;
	border: 1px solid var(--light-border-color);
	border-radius: 14px;
	padding: 1.8rem 1.4rem;
	width: 280px;
	position: relative;
	box-shadow: 0 4px 16px rgba(87,45,22,0.08);
}
.step-flow .step .step-no {
	font-family: var(--accent-font);
	font-size: 2.2rem;
	/*2026-08-03 縁取り(text-stroke)+薄いゴールドの中抜き表現が「かっこ悪い」との指摘を受けベタ塗りに変更。
	  ブラウンだとタイトル文字と差が付きにくいとの指摘を受け、目立つゴールドのベタ塗りに調整。*/
	color: var(--accent-color);
	font-weight: bold;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.step-flow .step h3 {
	font-family: var(--base-font);
	color: var(--primary-color);
	font-size: 1.1rem;
	margin-bottom: 0.6rem;
}
.step-flow .step .step-img img {
	/*2026-08-03 タイトル下に写真を入れて見た目のイメージを伝わりやすくする*/
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 0.8rem;
}
.step-flow .step p {
	font-size: 0.85rem;
	line-height: 1.8;
}
.step-arrow {
	display: flex;
	align-items: center;
	color: var(--accent-color);
	font-size: 1.6rem;
}
@media (max-width: 800px) {
	/*2026-08-04 矢印は90度回転していたが、.step-flowがflex-wrapのままだと
	  カード幅(280px)+矢印の余白がギリギリ収まってしまい、矢印がカードの右横に
	  並んでしまう不具合があった。1カラム縦積みにして、矢印もカードの下に
	  幅いっぱいで中央表示されるようにする。*/
	.step-flow {
		flex-direction: column;
		align-items: center;
	}
	.step-flow .step {
		width: 100%;
		max-width: 320px;
	}
	.step-arrow {
		justify-content: center;
		transform: rotate(90deg);
	}
}

/* Before/After 実績カード */
.result-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	margin: 2rem 0;
}
.result-cards .card {
	background: #fff;
	border: 1px solid var(--light-border-color);
	border-radius: 14px;
	padding: 0.6rem;
	width: 320px;
	box-shadow: 0 4px 16px rgba(87,45,22,0.08);
	text-align: center;
	overflow: hidden;
}
.result-cards .card .result-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.result-cards .card .result-episode {
	/*2026-08-03追加：Before/Afterの下に「どうして痩せられたか」の一言エピソードを表示*/
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--primary-color);
	text-align: left;
	margin-top: 0.8rem;
}
.result-cards .card .profile {
	font-family: var(--emphasis-font);
	color: var(--primary-color);
	font-size: 0.95rem;
	margin-bottom: 0.6rem;
}
.result-cards .card .weight-change {
	font-family: var(--accent-font);
	font-size: 1.4rem;
	color: var(--accent-color);
	font-weight: bold;
	margin: 0.6rem 0;
}
.result-cards .card ul {
	list-style: none;
	padding: 0;
	margin: 0.8rem 0 0;
	font-size: 0.85rem;
	color: var(--primary-color);
	text-align: left;
	display: inline-block;
}
.result-cards .card ul li {
	border-bottom: 1px dashed var(--light-border-color);
	padding: 0.3rem 0;
}

/* お客様の声（口コミ）カード 2026-08-04追加 */
.review-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	margin: 2rem 0;
}
.review-cards .card {
	background: #fff;
	border: 1px solid var(--light-border-color);
	border-radius: 14px;
	padding: 1.5rem;
	width: 280px;
	box-shadow: 0 4px 16px rgba(87,45,22,0.08);
	text-align: left;
}
.review-cards .card .head {
	/*2026-08-04 アバター（シルエット画像）+星評価を横並びに変更*/
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.8rem;
}
.review-cards .card .avatar {
	/*実際の顔写真は掲載できないため、シルエット画像で「女性のお客様」であることだけ示す*/
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--light-color);
	flex: none;
	overflow: hidden;
}
.review-cards .card .avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.review-cards .card .stars {
	color: var(--accent-color);
	font-size: 0.85rem;
}
.review-cards .card .quote {
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--primary-color);
	margin-bottom: 0.8rem;
}
.review-cards .card .meta {
	font-size: 0.75rem;
	color: #999;
	text-align: right;
}

	/*2026-08-04 スマホでは縦にずらっと並ぶと「読むのが大変」で離脱しやすいとの指摘のため、
	  1枚ずつ横スワイプで見せるカルーセル形式に変更（.list2の横スクロールと同じ考え方）。*/
	@media (max-width:700px) {

	.review-cards {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		margin: 1.5rem calc(-1 * var(--content-space-l));
		padding: 0 var(--content-space-l) 1rem;
	}
	.review-cards .card {
		flex: 0 0 82%;
		width: auto;
		scroll-snap-align: center;
	}

	}/*追加指定ここまで*/

/* 口コミセクション下の「もっと見る」導線。文字リンクだとスマホでタップしづらいため
   縦積みのボタンにしている（2026-08-04） */
.voice-more-links {
	text-align: center;
	margin-top: 1.5rem;
}
.voice-more-links .btn {
	margin: 0.6rem 0;
}
.voice-more-links .btn a {
	font-size: 0.9rem;
	padding: 0.6rem 2rem !important;
}

.review-swipe-hint {
	display: none;
}
	@media (max-width:700px) {
	.review-swipe-hint {
		display: block;
		font-size: 0.75rem;
		color: #999;
		margin-top: -1rem;
	}
	}

/* 「なぜソフィアパレスなのか」の下、3ステップ理由の変化リスト 2026-08-05追加 */
.change-flow {
	font-size: 0.95rem;
	font-weight: bold;
	color: var(--primary-color);
	margin: 1.5rem auto 2rem;
}
.change-flow .arrow {
	color: var(--accent-color);
	margin: 0 0.5rem;
}

/* 得られる未来：連鎖ベネフィットの一文 2026-08-05追加 */
.benefit-chain {
	max-width: 700px;
	margin: 2rem auto 0;
	font-size: 0.9rem;
	line-height: 1.9;
	color: var(--primary-color);
}

/* 選ばれる理由：長期利用の一文 2026-08-05追加 */
.long-term-badge {
	color: var(--accent-color);
	font-weight: bold;
	font-size: 0.9rem;
	margin-top: 0.8rem;
}

/* オファー：CTA直前の一言 2026-08-05追加 */
.cta-lead {
	color: var(--accent-color);
	font-weight: bold;
	font-size: 1.1rem;
	margin-bottom: 0.8rem;
}

/* 代表からのメッセージ 2026-08-05追加
   主役はエステティシャンなので、写真・署名は小さく控えめに。本文の存在感を優先。*/
.message-box {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.message-avatar {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 1.2rem;
	border: 2px solid var(--light-color);
}
.message-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.message-text {
	text-align: left;
	font-size: 0.92rem;
	line-height: 1.9;
	color: var(--primary-color);
}
.message-sign {
	margin-top: 1.5rem;
	font-weight: bold;
	color: var(--primary-color);
	font-size: 0.9rem;
}
.message-note {
	font-size: 0.72rem;
	color: #999;
	margin-top: 0.3rem;
}

/* ベネフィットセクション */
.benefit-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	margin: 2rem 0;
}
.benefit-list .benefit {
	width: 300px;
	text-align: center;
}
.benefit-list .benefit img {
	border-radius: 12px;
	margin-bottom: 1rem;
}
.benefit-list .benefit h3 {
	font-family: var(--base-font);
	color: var(--primary-color);
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}

/* CTAセクション強調 */
.cta-box {
	background: linear-gradient(135deg, #572d16 0%, #7a4522 100%);
	color: #fff;
	text-align: center;
	padding: 4rem 1.5rem;
	border-radius: 0;
}
.cta-box h2 {
	color: var(--gold-color);
	font-family: var(--base-font);
}
.cta-box p {
	color: #f5e9d8;
}
.cta-box .offer-badge {
	font-size: 1rem;
	color: #f5e9d8;	/*暗い背景用に文字色を明るく*/
}
.cta-box .btn a {
	font-size: 1.2rem;
	padding: 1rem 3rem !important;
}
.cta-note {
	font-size: 0.75rem;
	color: #e6d3b3;
	margin-top: 1rem;
}

/* 英字アイキャッチ（kazari-textの代替：Times New Roman）
   ※中抜き文字（text-stroke）は背景色によって見えなくなるため廃止し、
     ブラウンの塗り文字＋カタカナのピル表記に統一する。 */
.eyebrow-group {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}
.eyebrow {
	font-family: var(--accent-font);
	font-style: italic;
	font-weight: 700;
	color: var(--primary-color);
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	line-height: 1;
}
.eyebrow-kana {
	font-family: var(--emphasis-font);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	color: #fff;
	background: var(--accent-color);
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	white-space: nowrap;
}
/* 旧クラス名の互換（単体で使われている箇所向け） */
.eyebrow {
	display: inline-block;
}

/* ユーティリティ */
.tac { text-align: center; }
.mainimg .text .price-line { font-size: 1.15rem; margin-top: 0.3rem; }
/* 2026-08-09追加：ヒーロー説明文がbrand-mark/price-line/btnに比べて小さく見える指摘への対応。
   共通CSS（_shared/style.css）の .mainimg .text p が0.8remなので、ここだけ底上げする。 */
.mainimg .text p.mainimg-lead { font-size: 0.95rem; line-height: 1.8; }
/* 2026-08-09追加：上2つの文字拡大でヒーロー内の縦の合計高さが増え、.mainimg（overflow:hidden）の
   枠から予約ボタンがはみ出して見切れる（＝クリックできない）不具合の再発を防ぐため、
   要素間の余白（元は_shared/style.cssの1.25rem）を少し詰めて高さを吸収する。
   2026-08-04付の同種の不具合対応コメントと同じ原理。 */
.mainimg .text { gap: 1rem; }
.cta-box .text { max-width: 640px; margin: 0 auto; }

/* 2店舗アクセスカード
   ※ #access * { margin:0; padding:0; } という強いリセットが元テンプレにあるため、
     ここでは必ず #access を前置してリセットに勝てるようにする。 */
#access.section-wide h2 { margin-bottom: 0.5rem; }
#access .store-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;	/*高さの違うカード同士でも上端・下端を揃える*/
	gap: 2rem;
	justify-content: center;
	margin-top: 2rem;
}
#access .store-card {
	display: flex;
	flex-direction: column;	/*内容を縦に積み、ボタンを下端に揃えるための土台*/
	background: #fff;
	border: 1px solid var(--light-border-color);
	border-radius: 14px;
	padding: 1.8rem;
	width: 440px;
	max-width: 100%;
	box-shadow: 0 4px 16px rgba(87,45,22,0.08);
	text-align: left;
}
#access .store-card h3 {
	font-family: var(--base-font);
	color: var(--primary-color);
	font-size: 1.15rem;
	margin: 0 0 1rem;	/*2枚のカードで見出しの位置を必ず揃える*/
	text-align: center;
}
#access .store-photos {
	display: flex;
	gap: 0.6rem;
	margin-bottom: 1.2rem;
}
#access .store-photos img {
	width: 50%;
	height: 150px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
#access .store-card dl {
	display: grid;
	grid-template-columns: 5.5em minmax(0,1fr);
	gap: 0.5rem 1rem;
	font-size: 0.88rem;
	margin-bottom: 1.2rem;
}
#access .store-card dt {
	font-family: var(--emphasis-font);
	color: var(--accent-color);
	white-space: nowrap;
}
#access .store-card dd {
	color: var(--primary-color);
	line-height: 1.6;
}
#access .store-map {
	margin-bottom: 1rem;
}
#access .store-note {
	background: var(--light-color);
	border: 1px dashed var(--accent-color);
	border-radius: 10px;
	padding: 0.9rem 1rem;
	font-size: 0.82rem;
	color: var(--primary-color);
	line-height: 1.7;
	margin-bottom: 1rem;
}
#access .store-card .btn {
	margin-top: auto;	/*内容量が違っても、ボタンは必ずカード下端に揃う*/
}
#access .store-card .btn a {
	display: block;
	text-align: center;
}

/* 各セクション末尾の反復CTA */
.section-cta {
	text-align: center;
	margin-top: 2.5rem;
}
.section-cta .btn a {
	font-size: 1.05rem;
	padding: 0.8rem 2.4rem !important;
}
.section-cta .sub-note {
	font-size: 0.75rem;
	color: #999;
	margin-top: 0.5rem;
}

/* オファーセクション（3プラン） */
.offer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	/*2026-08-03 幅は3枚とも揃え、代わりに高さ(=paddingの量)で差をつけたいとの指摘を受け、
	  stretch(強制的に同じ高さ)をやめてそれぞれの中身なりの高さにする。
	  さらに上揃えだと差が伝わりにくいため、行の中で縦方向も中央揃えにする
	  （一番人気カードが上下ともはみ出て見える＝一番目立つ見た目になる）。*/
	align-items: center;
	margin: 2rem 0;
}
.offer-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,234,165,0.35);
	border-radius: 16px;
	padding: 1.4rem 1.4rem;
	width: 300px;
	text-align: center;
	color: #fff;
}
.offer-card.is-main {
	background: rgba(255,234,165,0.12);
	border: 2px solid var(--gold-color);
	width: 320px;
	padding: 2.2rem 1.4rem;	/*上下の余白を多めにして、横並びでも高さで一番目立つように*/
	position: relative;
	box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

	/*2026-08-03追加：スマホ幅(375px前後)だと320pxのis-mainカードが画面からはみ出す・
	  余白がほぼ無くなるため、狭い画面では固定px幅をやめて画面幅に合わせる。*/
	@media (max-width: 480px) {

	.offer-card,
	.offer-card.is-main {
		width: 100%;
		max-width: 320px;
	}

	}/*追加指定ここまで*/

	/*2026-08-04追加：スマホでは1カラムで上から順に読むため、真ん中固定だった
	  「一番人気」カードを先頭に表示する（HTMLの順番はPC表示のまま変更しない）。*/
	@media (max-width: 700px) {

	.offer-card.is-main {
		order: -1;
	}

	}/*追加指定ここまで*/
.offer-card .offer-tag {
	display: inline-block;
	font-family: var(--emphasis-font);
	font-size: 0.75rem;
	background: var(--gold-color);
	color: var(--primary-color);
	padding: 0.2rem 0.8rem;
	border-radius: 999px;
	margin-bottom: 0.8rem;
}
/*2026-08-03 「一番人気」タグが目立っていないとの指摘を受け、is-mainだけ大きく強調*/
.offer-card .offer-tag.offer-tag-main {
	font-size: 0.95rem;
	font-weight: bold;
	padding: 0.35rem 1.2rem;
	letter-spacing: 0.05em;
}
.offer-card h3 {
	font-family: var(--base-font);
	font-size: 1.05rem;
	color: var(--gold-color);
	margin-bottom: 0.6rem;
	line-height: 1.5;
}
.offer-card .offer-cond {
	font-size: 0.75rem;
	color: #e6d3b3;
	margin-bottom: 0.8rem;
}
.offer-card .offer-price {
	font-size: 1.8rem;
	display: block;
	margin-bottom: 1rem;
}
.offer-card.is-main .offer-price {
	font-size: 2.2rem;
}

/* Googleマップ埋め込み */
.store-map {
	margin-top: 1rem;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--light-border-color);
}
.store-map iframe {
	display: block;
	width: 100%;
	height: 220px;
	border: 0;
}

/* ファーストビューのブランドマーク（SOPHIA PALACE / ソフィアパレス）
   ※セクション見出しの .eyebrow / .eyebrow-kana と統一デザインに揃える */
.brand-mark {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	justify-content: flex-end;	/*2026-08-03 会社名は優先度が低いとの指摘を受け右寄せに*/
	gap: 0.6rem;
	margin-bottom: 0.8rem;
}
.brand-mark .en {
	font-family: var(--accent-font);
	font-style: italic;
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.06em;
	color: var(--primary-color);
}
.brand-mark .kana {
	font-family: var(--emphasis-font);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	color: #fff;
	background: var(--accent-color);
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
}

/* 公式ロゴ（正方形）に合わせたサイズ調整 */
header .logo img {
	width: 56px;
}
footer .logo img {
	width: 120px;
}

.offer-card .offer-desc {
	font-size: 0.8rem;
	line-height: 1.7;
	color: #f0e3cc;
	margin-bottom: 0.8rem;
}

/* 暗い背景（CTAボックス）の中では見出しの英字を金色に切り替え */
.cta-box .eyebrow {
	color: var(--gold-color);
}
.cta-box .eyebrow-kana {
	background: rgba(255,255,255,0.15);
	border: 1px solid var(--gold-color);
}

/* フッター左ブロック（ロゴ・電話番号）を中央寄せに */
footer .footer-brand {
	text-align: center;
}
footer .footer-brand .logo {
	display: flex;
	justify-content: center;
	/*2026-08-03 style.cssのfooter .logo{max-width:300px}で箱の幅が絞られているのに
	  箱自体を中央寄せするmarginが無く、列の中で左寄りに見えていたため追加。*/
	margin-left: auto;
	margin-right: auto;
}