/*
Theme Name: Chokipeta
Theme URI: https://www.chokipeta.com/
Author: HROTTI
Description: 株式会社C&P チョキペタ サイトリニューアル用テーマ（新規構築）
Version: 0.157.0
Requires PHP: 8.5
Text Domain: chokipeta
*/

/* ============================================================
   1. デザイントークン（Figma デザインシステム準拠）
   ============================================================ */
:root {
	/* 色 */
	--c-base: #F4F3F2;        /* ベース背景 */
	--c-white: #FFFFFF;
	--c-cream: #FBF6E9;
	--c-palelime: #F1F7DA;
	--c-ink: #523B25;         /* 本文・見出し */
	--c-soft: #8C7B63;        /* 補助テキスト */
	--c-line: #EFE7D6;        /* カードの枠線 */
	--c-green: #45B035;       /* メイン */
	--c-lime: #A9D500;
	--c-yellow: #F9EC00;
	--c-amber: #F6B42C;
	--c-sky: #7FCBE4;
	--c-line-green: #06C755;  /* LINEボタン専用 */

	/* 文字（年配層向けに大きめ。SP16px / PC18px 基準） */
	--f-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-lead: 18px;
	--fs-h1: 32px;
	--fs-h2: 24px;
	--fs-h3: 19px;
	--lh-body: 1.75;

	/* 余白（カンプ実測：セクション上下24・要素間24・カード間16。
	   セクション境界＝24+24＝48px。帯もクリームも一律＝例外を作らない） */
	--sp-section: 24px;
	--sp-block: 24px;
	--sp-card: 16px;
	--sp-gutter: 16px;

	/* 角丸・枠線 */
	--r-card: 16px;
	--r-sitemap: 20px;
	--bw-card: 3px;
	--bw-btn: 1.5px;

	/* レイアウト */
	--w-content: 1000px;   /* PCのコンテンツ幅 */
	--w-narrow: 760px;     /* PCの中央寄せコンテンツ（記事本文・プレート） */
	--header-h: 64px;

	/* 外部リンクのアイコン（角丸の枠＋右上に飛び出す矢印。2026-08-25にクライアント支給のデザインへ変更）
	   マスクとして使い background-color: currentColor で塗るので、置いた場所の文字色に自動で揃う。 */
	--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M13 4.4H7.2A2.8 2.8 0 0 0 4.4 7.2v9.6a2.8 2.8 0 0 0 2.8 2.8h9.6a2.8 2.8 0 0 0 2.8-2.8V11'/%3E%3Cpath d='M14 3.6h6.4V10'/%3E%3Cpath d='M19.8 4.2 10.4 13.6'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
	:root {
		--fs-body: 18px;
		--fs-small: 15px;
		--fs-lead: 20px;
		--fs-h1: 56px;
		--fs-h2: 28px;
		--fs-h3: 21px;
		--sp-block: 32px;
		--sp-gutter: 32px;
		--header-h: 88px;
	}
}

/* ============================================================
   2. ベース
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-base);
	color: var(--c-ink);
	font-family: var(--f-base);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }

/* hidden属性はどのdisplay指定よりも優先させる（flex/grid指定に負けるため） */
[hidden] { display: none !important; }

a { color: var(--c-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* キーボード操作時のフォーカスを分かるように */
:focus-visible { outline: 3px solid var(--c-green); outline-offset: 2px; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   3. レイアウト部品
   ============================================================ */
.l-container {
	width: 100%;
	max-width: calc(var(--w-content) + var(--sp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

/* SPだけで改行する（PCでは <br> を消して詰める）。使い方＝ …を、<br class="u-br-sp">… */
.u-br-sp { display: inline; }
@media (min-width: 900px) {
	.u-br-sp { display: none; }
}

.l-section { padding-block: var(--sp-section); }
/* 見出し→コンテンツ／コンテンツ→ボタン の縦リズム。
   .l-container を挟むケースがあるので両方に効かせる（SP24 / PC32） */
.l-section > * + *,
.l-section > .l-container > * + * { margin-top: var(--sp-block); }

.l-section--white { background: var(--c-white); }
.l-section--pale  { background: var(--c-palelime); }

.l-narrow { max-width: var(--w-narrow); margin-inline: auto; }

/* ============================================================
   4. 見出し
   ============================================================ */
.c-heading {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.5;
}
.c-heading::before {
	content: "";
	flex: none;
	width: 5px;
	height: 1.1em;
	border-radius: 2.5px;
	background: var(--c-green);
}
@media (min-width: 900px) {
	.c-heading { gap: 13px; }
	.c-heading::before { width: 7px; border-radius: 3.5px; }

	/* 中身が narrow 幅（760px）のセクションは、見出しも同じ幅に揃える
	   ------------------------------------------------------------
	   コンテナは1000pxなので、そのままだと見出しだけ左に120px飛び出して見える
	   （2026-08-25 中村さん指摘）。
	   ⚠ここで :has() を使うのは、同じ構造のセクションが11箇所あって
	     テンプレート側にクラスを足して回ると付け忘れるため。今後
	     narrow なコンポーネントを追加しても自動で揃う。
	     :has() 非対応の古いブラウザでは今までどおり（崩れはしない）。 */
	.c-heading:has( + .p-faq ),
	.c-heading:has( + .p-notes ),
	.c-heading:has( + .p-narrow ),
	.c-heading:has( + .p-prices ),
	.c-heading:has( + .p-shop-search ) {
		max-width: var(--w-narrow);
		margin-inline: auto;
	}

	/* 料金シミュレーターは「見出し→リード文→.p-sim」の3段構成なので、
	   見出しだけでなくリード文も narrow 幅（760px）に揃える
	   （2026-08-25 中村さん指摘：内側に寄せる） */
	.c-heading:has( + .c-lead + .p-sim ),
	.c-lead:has( + .p-sim ) {
		max-width: var(--w-narrow);
		margin-inline: auto;
	}
}

.c-heading--center {
	display: block;
	text-align: center;
}
.c-heading--center::before { display: none; }

.c-lead { font-size: var(--fs-body); }

/* ============================================================
   5. ボタン
   ============================================================ */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 56px;
	padding: 12px 28px;
	border-radius: 999px;
	/* 2026-08-18 クライアント要望：プライマリー（緑塗り）を廃止し、
	   全ボタンをセカンダリー（白地＋緑線＋緑文字）のあしらいに統一。 */
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-green);
	color: var(--c-green);
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}
.c-btn:hover { text-decoration: none; opacity: .88; }

/* セカンダリ（白地・緑線）＝2026-08-18 以降は .c-btn の既定と同一。
   既存マークアップ互換のため修飾子は残す。 */
.c-btn--outline {
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-green);
	color: var(--c-green);
}

/* LINEボタンだけはLINEグリーンの塗り（白抜き化の対象外） */
.c-btn--line {
	background: var(--c-line-green);
	border-color: var(--c-line-green);
	color: var(--c-white);
}

.c-btn--block { width: 100%; }

/* ボタンの上余白は24px（カンプ実測。PCも24なのでトークンではなく固定値） */
.c-btn-row,
.l-section > .l-container > .c-btn-row {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

/* 第3階層の戻るボタン。単独セクションなので c-btn-row の上余白24pxは要らない。
   ⚠上の `.l-section > .l-container > .c-btn-row`（詳細度0,3,0）に勝たせるため、
   セレクタも3クラスで書くこと。`.p-backlink .c-btn-row` だと負けて24pxが残り、
   セクションのpadding-topと足されて上だけ48pxになる。 */
.p-backlink > .l-container > .c-btn-row { margin-top: 0; }

/* ============================================================
   6. カード
   ============================================================ */
.c-card {
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
	padding: 20px 18px;
}
@media (min-width: 900px) {
	.c-card { padding: 32px; }
}

/* ============================================================
   7. ヘッダー
   ============================================================ */
.l-header {
	position: relative;
	background: var(--c-white);
	border-bottom: 2px solid var(--c-lime);
}
.l-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--header-h);
}
.l-header__logo { display: flex; align-items: center; }
.l-header__logo img { width: 117px; }
@media (min-width: 900px) {
	.l-header__logo img { width: 156px; }
}

.l-header__nav { display: none; }

@media (min-width: 900px) {
	.l-header__nav {
		display: flex;
		align-items: center;
		gap: 36px;
	}
	.l-header__gnav {
		display: flex;
		align-items: center;
		gap: 20px;
		font-size: 20px;
		font-weight: 500;
	}
	.l-header__nav .c-btn { min-height: 53px; padding: 12px 24px; font-size: 20px; }
}

/* 900〜1099px はナビが入りきらず折り返すので、文字と間隔を詰める
   （カンプは1440px想定でコンテンツ1000px。中間幅の保険） */
@media (min-width: 900px) and (max-width: 1099px) {
	.l-header__nav { gap: 20px; }
	.l-header__gnav { gap: 14px; font-size: 16px; }
	.l-header__nav .c-btn { min-height: 48px; padding: 10px 16px; font-size: 16px; }
}

/* ハンバーガー */
.l-header__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.l-header__toggle span {
	display: block;
	width: 26px;
	height: 3px;
	margin-inline: auto;
	border-radius: 2px;
	background: var(--c-ink);
	transition: transform .2s, opacity .2s;
}
@media (min-width: 900px) {
	.l-header__toggle { display: none; }
}

/* ドロワー */
.l-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	background: var(--c-white);
	overflow-y: auto;
	padding-bottom: 40px;
}
.l-drawer[data-open="true"] { display: block; }
.l-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
	padding-inline: var(--sp-gutter);
	border-bottom: 2px solid var(--c-lime);
}
.l-drawer__close {
	width: 44px; height: 44px;
	background: none; border: 0;
	font-size: 28px; line-height: 1;
	color: var(--c-ink); cursor: pointer;
}
.l-drawer__list { padding: 8px var(--sp-gutter); }
.l-drawer__list li { border-bottom: 1px solid var(--c-line); }
.l-drawer__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 4px;
	font-weight: 700;
}
.l-drawer__list a::before {
	content: "";
	flex: none;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-lime);
}
.l-drawer__cta { padding: 24px var(--sp-gutter) 0; }

body[data-drawer-open="true"] { overflow: hidden; }

/* ============================================================
   8. サイトマップ
   ------------------------------------------------------------
   帯の背景はTOPだけ白。下層ページは地のグレーのまま（カンプ実測）。
   カード自体はどちらも白。
   ============================================================ */
.home .p-sitemap { background: var(--c-white); }
.p-sitemap__card {
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-sitemap);
	/* ⚠左右のpaddingは詰めてある。360px幅の端末で「チョキペタって？」(8文字＝128px)が
	   1列に収まる必要があるため（列幅＝(画面幅-32-枠6-padding24-列gap8)/2、行頭ドット14px）。 */
	padding: 24px 12px;
}
/* 縦に流しつつ行を共有する（2行になる項目があっても左右の行頭が揃う） */
.p-sitemap__list {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--rows-sp, 6), auto);
	gap: 16px 8px;
	align-items: start;
}
/* 行頭のドットは absolute で置く（grid/flexにすると ::after の外部リンク矢印が
   別アイテム扱いになって改行してしまうため） */
.p-sitemap__list a {
	position: relative;
	display: block;
	padding-left: 14px;
}
.p-sitemap__list a::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-lime);
}
@media (min-width: 900px) {
	.p-sitemap__card {
		padding: 30px 48px;
		border-radius: 24px;
	}
	.p-sitemap__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(var(--rows-pc, 4), auto);
		gap: 24px 34px;
	}
	/* PCは幅に余裕があるのでドットの間隔は元のまま */
	.p-sitemap__list a { padding-left: 17px; }
}

/* ============================================================
   9. フッター
   ============================================================ */
.l-footer { margin-top: 0; }
.l-footer__wave { display: block; width: 100%; height: 38px; line-height: 0; color: var(--c-green); }
/* TOPのみ：サイトマップと緑帯の間（波の背面）を白でつなぐ（中村さん指示 2026-08-13） */
.home .l-footer__wave { background: var(--c-white); }
.l-footer__wave svg { display: block; width: 100%; height: 100%; }
/* 波とのつなぎ目に1pxの白い線が出るので1px重ねる */
.l-footer__band {
	margin-top: -1px;
	background: var(--c-green);
	color: var(--c-white);
	padding: 17px var(--sp-gutter) 12px;
	text-align: center;
}
.l-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 8px;
	font-size: 15px;
	font-weight: 500;
}
.l-footer__menu a { color: var(--c-white); }
.l-footer__sep { opacity: .7; }
.l-footer__copy {
	display: block;
	margin-top: 11px;
	font-size: 15px;
	color: var(--c-white);
}
@media (min-width: 900px) {
	.l-footer__wave { height: 75px; }
	.l-footer__band { padding: 19px var(--sp-gutter) 22px; }
	.l-footer__menu { gap: 32px; }
	.l-footer__copy { margin-top: 36px; font-size: 14px; }
}

/* 外部リンクのアイコン（フッターには付けない＝デザイン確定）
   ------------------------------------------------------------
   2026-08-25：文字の「↗」からクライアント支給のアイコンに変更した。
   ⭐currentColor で塗る＋サイズを em で指定しているので、置いた場所の
     文字色・文字サイズに自動で合う（緑のリンクなら緑、白なら白）。 */
.is-external::after,
.c-banner__ext,
.c-exticon {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.3em;
	vertical-align: -0.08em;
	background-color: currentColor;
	-webkit-mask: var(--icon-external) no-repeat center / contain;
	mask: var(--icon-external) no-repeat center / contain;
}
.l-footer__menu .is-external::after { content: none; }

/* ============================================================
   10. リンクバナー（TOPのカードバナー共通）
   ------------------------------------------------------------
   白地＋3pxの枠＋角丸18＋弱い影。画像枠はアクセント12%。
   ⚠枠線は2026-08-17に「緑・スカイ・アンバーが混在してガチャガチャ見える」
     （クライアント指摘）でブラウンに統一。2026-08-18 に薄い方(--c-soft)へ変更。太さは3pxのまま。
     --accent は画像プレースホルダの淡い地色にだけ残している。
   ============================================================ */
.c-banner {
	--accent: var(--c-green);
	--accent-weak: rgba(69, 176, 53, .12);

	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-soft);
	border-radius: 18px;
	box-shadow: 0 3px 6px rgba(82, 59, 37, .16);
}
a.c-banner:hover { text-decoration: none; opacity: .92; }

.c-banner--sky   { --accent: var(--c-sky);   --accent-weak: rgba(127, 203, 228, .18); }
.c-banner--amber { --accent: var(--c-amber); --accent-weak: rgba(246, 180, 44, .16); }

.c-banner__img {
	display: block;
	overflow: hidden;
	aspect-ratio: 303 / 160;
	border-radius: 12px;
	background: var(--accent-weak);
}
.c-banner__img img { width: 100%; height: 100%; object-fit: cover; }

.c-banner__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-banner__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-ink);
}
.c-banner__text {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.72;
	color: var(--c-ink);
}

/* バナーの中身：見出し＋本文（head）とボタンを上下に分け、
   2枚並びでもボタンの位置が揃うようにボタンは下端寄せにする。
   本文→ボタンは 16px + body の gap 8px ＝ 24px 以上を確保（ボタン上余白のルール）。 */
.c-banner__body { flex: 1 1 auto; }
.c-banner__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.c-banner__head:not(:only-child) { margin-bottom: 16px; }
.c-banner__btn { margin-top: auto; }

.c-banner--center { text-align: center; }

@media (min-width: 900px) {
	/* 画像左・テキスト右の横並びバナー（単体設置のとき） */
	.c-banner--row {
		flex-direction: row;
		gap: 24px;
		align-items: center;
	}
	.c-banner--row .c-banner__img {
		flex: none;
		width: 300px;
		aspect-ratio: 300 / 158;
	}
	.c-banner--row .c-banner__body { flex: 1 1 auto; }
}

/* バナーの並べ方：SP縦積み → PC2カラム */
.p-banner-grid {
	display: grid;
	gap: var(--sp-block);
}
.p-banner-grid--tight { gap: var(--sp-card); }

@media (min-width: 900px) {
	.p-banner-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-card); }
	/* 下層ページの関連リンク：縦バナー384 ＋ 横並びバナー600（カンプ実測） */
	.p-banner-grid--asym { grid-template-columns: 384fr 600fr; }
	/* 単体設置は中央に置く（1200px全幅は間延びするため760px基準） */
	.p-banner-grid--single { grid-template-columns: minmax(0, 600px); justify-content: center; }
	.p-banner-grid--narrow { grid-template-columns: minmax(0, 492px); justify-content: center; }
}

/* ============================================================
   11. KV（トップ）
   ============================================================ */
.p-kv { background: var(--c-white); padding-bottom: var(--sp-block); }

.p-kv__photo {
	position: relative;
	aspect-ratio: 375 / 300;
	background: var(--c-palelime);
}
.p-kv__photo picture { display: block; width: 100%; height: 100%; }
.p-kv__photo img { width: 100%; height: 100%; object-fit: cover; }

/* 写真が未入稿のときのプレースホルダ */
.p-kv__photo--empty {
	display: grid;
	place-items: center;
	background: repeating-linear-gradient(-45deg, #F1F7DA 0 12px, #E8F1CB 12px 24px);
}
.p-kv__photo-note { color: var(--c-soft); font-weight: 700; }

.p-kv__body {
	position: relative;
	width: min(343px, calc(100% - 32px));
	margin: -56px auto 0;
}

.p-kv__card {
	position: relative;
	padding: 30px 0 24px;
	background: var(--c-white);
	border-radius: 20px;
	box-shadow: 0 6px 20px rgba(82, 59, 37, .12);
	text-align: center;
}

/* マスコットはカード上辺の左右に乗せる（対称インセット） */
.p-kv__chara {
	position: absolute;
	bottom: calc(100% - 36px);
	width: 64px;
	height: auto;
}
.p-kv__chara--l { left: 6px; }
.p-kv__chara--r { right: 6px; width: 60px; bottom: calc(100% - 33px); }

.p-kv__catch { padding-inline: 16px; line-height: 1.4; }
.p-kv__catch-sub {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.68;
}
.p-kv__catch-main {
	display: block;
	margin-top: 6px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.38;
}
/* 黄マーカーは文字の下部に敷く */
.p-kv__marker { position: relative; display: inline-block; }
.p-kv__marker::before {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: .12em;
	height: 14px;
	border-radius: 7px;
	background: rgba(249, 236, 0, .55);
}
.p-kv__marker-text { position: relative; }

.p-kv__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* ⚠1行に収める必要がある。2026-08-27に「早い・安い・親切・丁寧」の4つ（計8文字）へ変更。
	   15px×8文字＝120px＋左右padding24×4＋gap8×3＝240px。
	   カードは min(343px, 100vw - 32px) なので余裕をもって1行に収まる。
	   ⚠文言を増やすときは必ず幅を計算し直すこと。旧「予約不要／買い物ついでに／年中無休」（15文字）は
	     313pxでギリギリ、gap10・padding14にしたら329pxになって360px幅の端末で最後の1つが落ちた。 */
	gap: 8px;
	margin-top: var(--sp-card);
}
.p-kv__chips li {
	padding: 3px 12px;
	white-space: nowrap;
	border-radius: 16px;
	background: var(--c-palelime);
	color: var(--c-green);
	font-size: 15px;
	font-weight: 700;
	line-height: 26px;
}
/* iPhone SE(320px)クラスの極小画面でも落とさない（225＋padding16×3＋gap6×2＝285px） */
@media (max-width: 349px) {
	.p-kv__chips { gap: 6px; }
	.p-kv__chips li { padding-inline: 8px; }
}

.p-kv__cta { margin-top: var(--sp-block); text-align: center; }
.p-kv__cta .c-btn { width: min(295px, 100%); }

@media (min-width: 900px) {
	/* ⚠width指定が無いと、max-heightで高さが詰まったぶん aspect-ratio が幅を1440pxに縮めてしまい
	   1440pxより広い画面で左寄せになる（中村さん指摘）。幅は必ず100%にする */
	.p-kv__photo { width: 100%; aspect-ratio: 1440 / 515; max-height: 515px; }
	.p-kv__body { width: min(var(--w-narrow), calc(100% - 64px)); margin-top: -90px; }
	.p-kv__card { padding: 40px 0 36px; }
	.p-kv__catch { padding-inline: 32px; }

	.p-kv__chara { width: 100px; bottom: calc(100% - 59px); }
	.p-kv__chara--l { left: 28px; }
	.p-kv__chara--r { right: 28px; width: 94px; bottom: calc(100% - 53px); }

	.p-kv__catch-sub { font-size: 24px; }
	.p-kv__catch-main { margin-top: 10px; font-size: 48px; }
	.p-kv__marker::before { height: 20px; border-radius: 10px; }

	.p-kv__chips { gap: 14px; margin-top: 24px; }
	.p-kv__chips li { font-size: 16px; line-height: 34px; border-radius: 20px; padding: 3px 18px; }

	.p-kv__cta .c-btn { width: 360px; min-height: 67px; font-size: 20px; }
}

/* ============================================================
   12. 店舗検索プレート（トップ）
   ============================================================ */
.p-shop-search {
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
	padding: 20px 16px;
}
.p-shop-search__select { position: relative; }
.p-shop-search__select::after {
	content: "▼";
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--c-soft);
	font-size: 15px;
	pointer-events: none;
}
.p-shop-search select {
	width: 100%;
	min-height: 52px;
	padding: 0 40px 0 20px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 8px;
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--fs-lead);
	appearance: none;
}
.p-shop-search .c-btn { margin-top: 12px; }

@media (min-width: 900px) {
	.p-shop-search {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24px;
		max-width: var(--w-narrow);
		margin-inline: auto;
		padding: 40px 28px;
	}
	.p-shop-search__select { flex: none; width: 420px; }
	.p-shop-search select { min-height: 60px; }
	.p-shop-search .c-btn { flex: none; width: 260px; min-height: 63px; margin-top: 0; }
}

/* ============================================================
   13. 記事リスト（トップのブログ・お知らせ）
   ------------------------------------------------------------
   SP＝1枚のカードに行を積む／PC＝3カードの横並び
   ============================================================ */
.p-news {
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
	padding: 16px 20px 0;
}
.p-news__item + .p-news__item { border-top: 1px solid var(--c-line); }

.p-news__link {
	display: flex;
	gap: 16px;
	padding: 7px 0 8px;
}
.p-news__item:first-child .p-news__link { padding-top: 0; }
.p-news__item:last-child .p-news__link { padding-bottom: 20px; }
.p-news__link:hover { text-decoration: none; }
.p-news__link:hover .p-news__title { text-decoration: underline; }

/* TOPのお知らせのサムネ
   ⭐2026-08-31：記事カードと同じ理由で**画像を切らない**（枠は7:5＋contain）。
   → 詳しくは .p-article-card__thumb のコメント。 */
.p-news__thumb {
	flex: none;
	display: block;
	overflow: hidden;
	width: 64px;
	height: auto;
	aspect-ratio: 7 / 5;
	border-radius: 8px;
	background: var(--c-white);
}
.p-news__thumb img { width: 100%; height: 100%; object-fit: contain; }

.p-news__body { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.p-news__date { color: var(--c-soft); font-size: 18px; line-height: 1.5; }
.p-news__title { font-size: var(--fs-lead); font-weight: 700; line-height: 1.72; }

@media (min-width: 900px) {
	.p-news {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}
	.p-news__item {
		background: var(--c-white);
		border: var(--bw-card) solid var(--c-line);
		border-radius: var(--r-card);
	}
	.p-news__item + .p-news__item { border-top: var(--bw-card) solid var(--c-line); }
	.p-news__link {
		flex-direction: column;
		gap: 14px;
		height: 100%;
		padding: 16px 16px 20px;
	}
	/* SPの行積み用に入れている先頭/最終行の例外を、カード並びでは打ち消す */
	.p-news__item:first-child .p-news__link { padding-top: 16px; }
	.p-news__item:last-child .p-news__link { padding-bottom: 20px; }
	/* ⚠2026-08-31：aspect-ratio(288/198) をやめ、SPと同じ 7/5 を継いで画像を切らない */
	.p-news__thumb { width: 100%; height: auto; }
	.p-news__body { gap: 4px; padding-top: 0; }
	.p-news__title { font-size: 20px; line-height: 1.55; }
}

/* ============================================================
   14. 下層ページの見出しセット（英字ラベル＋H1＋リードプレート）
   ============================================================ */
.p-hero { padding: 26px 0 12px; }
.p-hero__inner { position: relative; }

/* マスコット（チョッキー&ペッタン）はH1の右横 */
.p-hero__chara {
	position: absolute;
	top: -6px;
	right: 8px;
	width: 100px;
	height: auto;
}

.p-hero__label {
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.73;
}
.p-hero__title {
	/* 右上のマスコットは1行目にしか重ならないので、1行目だけ幅を空ける
	   （2行目以降はフル幅を使う。::beforeのfloatで回り込ませる） */
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.35;
}
/* マスコットをよけるための1行分の見えない箱（SP=100px＋右8px＋余白8px）
   ⚠高さを1行ぶん（1.35em）ぴったりにすると、iOS Safariの端数の丸めで箱が2行目に
     はみ出し、2行目まで幅が詰まって余計な行送りが起きる（実機で発生）。
     1行の行送り（1.35em）より確実に小さい値にして、1行目だけに効かせる。 */
.p-hero__title::before {
	content: "";
	float: right;
	width: 116px;
	height: 1.2em;
}

/* 8文字までの見出しは、SPで2行に折らず1行に収める（文字サイズは変えない）。
   全角1文字＝1em なので、見出しに必要な幅は 文字数 × --fs-h1。
   残りをマスコットの幅に回し、足りない画面幅ではマスコット側を縮める。 */
.p-hero--fit .p-hero__title { white-space: nowrap; }
.p-hero--fit .p-hero__title::before {
	width: min( 116px, max( 0px, calc( 100% - var(--t-len, 8) * var(--fs-h1) ) ) );
}
.p-hero--fit .p-hero__chara {
	/* ⚠絶対配置なので % はコンテナのpaddingボックス（＝画面幅）基準。
	   40px＝コンテナ左右padding(32) ＋ 見出しとの間隔(8)。56pxは縮小の下限。 */
	width: clamp( 56px, calc( 100% - 40px - var(--t-len, 8) * var(--fs-h1) ), 100px );
}

.p-hero__plate {
	margin-top: 26px;
	padding: 14px 16px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
	font-size: var(--fs-lead);
	line-height: 1.72;
}
.p-hero__dots {
	display: flex;
	gap: 6px;
	margin-top: 26px;
}
/* リードプレートが無いページはH1からの間隔をそのまま使う */
.p-hero__title + .p-hero__dots { margin-top: 26px; }
.p-hero__dots span {
	width: 8px; height: 8px;
	border-radius: 50%;
}
.p-hero__dots span:nth-child(1) { background: var(--c-green); }
.p-hero__dots span:nth-child(2) { background: var(--c-lime); }
.p-hero__dots span:nth-child(3) { background: var(--c-yellow); }

@media (min-width: 900px) {
	.p-hero { padding: 78px 0 48px; }
	.p-hero__chara { top: 10px; right: 0; width: 300px; }
	.p-hero__label { margin-bottom: 6px; font-size: 18px; }
	/* PCはマスコットが縦にも大きい（下端まで見出し3行分にかかる）ので高さで指定 */
	.p-hero__title::before { width: 316px; height: 176px; }
	.p-hero__plate {
		max-width: 672px;
		margin-top: 29px;
		padding: 18px 22px;
	}
	/* PCはマスコットが横316pxでも見出しが収まるので、SPの詰めは効かせない */
	.p-hero--fit .p-hero__title { white-space: normal; }
	.p-hero--fit .p-hero__title::before { width: 316px; }
	.p-hero--fit .p-hero__chara { width: 300px; }
	.p-hero__dots { gap: 8px; margin-top: 16px; }
	.p-hero__title + .p-hero__dots { margin-top: 29px; }
	.p-hero__dots span { width: 10px; height: 10px; }
}

/* ============================================================
   15. 写真＋説明カード（SP縦積み → PC横並び）
   ============================================================ */
.p-media {
	display: grid;
	gap: var(--sp-block);
}
.p-media__img {
	display: block;
	overflow: hidden;
	aspect-ratio: 343 / 229;
	border-radius: var(--r-card);
	background: var(--c-palelime);
}
.p-media__img img { width: 100%; height: 100%; object-fit: cover; }
.p-media__img--empty {
	background: repeating-linear-gradient(-45deg, #F1F7DA 0 12px, #E8F1CB 12px 24px);
}
.p-media__body { border-radius: 12px; padding: 16px; }

@media (min-width: 900px) {
	/* カンプ 1553:2（content_row）＝写真460×306／カード508・gap32、カードは中身の高さのまま
	   写真の天地に対して中央揃え（2026-08-24 変更。元は align-items: stretch でカードが写真と同じ高さに伸びていた）。 */
	.p-media {
		grid-template-columns: 460fr 508fr;
		gap: 32px;
		align-items: center;
	}
	.p-media__img { aspect-ratio: 460 / 306; }
	.p-media__body { border-radius: var(--r-card); padding: 24px; }
}

/* ============================================================
   16. 比較表（ホームカラーとの違い）
   ============================================================ */
.p-compare {
	padding: 8px 16px;
	background: var(--c-white);
	/* 枠線はブラウン（2026-08-17にバナーと統一／2026-08-18に薄い方 --c-soft へ） */
	border: var(--bw-card) solid var(--c-soft);
	border-radius: var(--r-card);
}
.p-compare__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var(--fs-lead);
	line-height: 1.72;
	text-align: left;
}
.p-compare__table th,
.p-compare__table td {
	padding: 12px 0;
	vertical-align: top;
	font-weight: 700;
}
/* 見出し列の幅。table-layout:fixed は「最初の行」のセル幅しか見ないので、
   thead の1セル目に効く :first-child で指定する（2026-08-26 修正。
   旧 th[scope="row"] だと /about は thead が scope="col" のため効かず、
   3列が等幅＝見出し列が広すぎて本文列が潰れていた）。
   SPは見出し列76px（「頭皮への」4文字＋α）＋ホームカラー列40%。
   これ以上見出し列を広げると、列見出しの「ホームカラー」が2行に折れる。 */
.p-compare__table th:first-child { width: 76px; }
.p-compare__table tr > *:nth-child(2) { width: 40%; }
/* /about は「チョキペタ」列をいちばん広く取る（2026-08-26 中村さん指示）。
   ホームカラー列は32%まで詰めて、列見出しは「ホーム／カラー」の2行にする。
   /premium（--line）は列見出しが5〜6文字で折り返すので40%のまま。 */
.p-compare:not(.p-compare--line) .p-compare__table tr > *:nth-child(2) { width: 32%; }
.p-compare__table tbody th,
.p-compare__table tbody td + td { font-weight: 700; }
.p-compare__table tbody td:first-of-type { font-weight: 400; }
.p-compare__table tbody tr th,
.p-compare__table tbody tr td { border-top: 1px solid var(--c-line); }
.p-compare__table td + td,
.p-compare__table th + th { padding-left: 8px; }
.p-compare__other { color: var(--c-soft); }
.p-compare__ours { color: var(--c-green); }

@media (min-width: 900px) {
	.p-compare { padding: 12px 32px; }
	/* /about の比較表はコンテンツ幅（1000px）いっぱい＝カンプ 1553:2 の compare_card 997px 準拠。
	   （2026-08-24 変更。元は --w-narrow 760px で中央寄せしていた）
	   /premium の比較表（.p-compare--line）は2カラムの右側に入るので、そのまま列幅に従う。 */
	.p-compare__table { line-height: 1.55; }
	.p-compare__table th,
	.p-compare__table td { padding: 14px 0; }
	/* PCはカンプ 1554:10 準拠＝見出し列180px、本文2列は等分（SPの40%指定を解除） */
	.p-compare__table th:first-child { width: 180px; }
	.p-compare__table tr > *:nth-child(2),
	.p-compare:not(.p-compare--line) .p-compare__table tr > *:nth-child(2) { width: auto; }
	.p-compare__table td + td,
	.p-compare__table th + th { padding-left: 16px; }
}

/* ============================================================
   17. お客様の声
   ============================================================ */
.p-voices {
	display: grid;
	gap: var(--sp-card);
}
.p-voice {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-voice__text { font-size: var(--fs-lead); line-height: 1.72; }
.p-voice__meta { color: var(--c-soft); font-size: var(--fs-lead); }

@media (min-width: 900px) {
	.p-voices { grid-template-columns: repeat(3, 1fr); }
	.p-voice { gap: 12px; padding: 20px; }
	.p-voice__meta { font-size: 18px; }
}

/* ============================================================
   18. ようこそバー（店頭QRからの着地ページ）
   ============================================================ */
.p-welcome {
	padding: 12px var(--sp-gutter);
	background: var(--c-white);
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.72;
}
@media (min-width: 900px) {
	.p-welcome { padding: 14px var(--sp-gutter); text-align: center; }
}

/* ============================================================
   19. ページ上部のKV写真
   ============================================================ */
.p-kv-photo { padding: 12px 0 24px; }
.p-kv-photo__frame {
	display: block;
	overflow: hidden;
	aspect-ratio: 343 / 229;
	border-radius: var(--r-card);
	background: var(--c-palelime);
}
.p-kv-photo__frame img { width: 100%; height: 100%; object-fit: cover; }
.p-kv-photo__frame--empty {
	background: repeating-linear-gradient(-45deg, #F1F7DA 0 12px, #E8F1CB 12px 24px);
}
@media (min-width: 900px) {
	.p-kv-photo { padding: 20px 0 48px; }
	.p-kv-photo__frame { aspect-ratio: 1000 / 400; }
}

/* ============================================================
   20. メッセージセクション（センター組み）＋LINE風トーク
   ============================================================ */
.p-message { text-align: center; }
.p-message__title {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.5;
}

.p-talk {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: var(--sp-block);
	text-align: left;
}
.p-talk__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	/* ⚠2026-08-31：この行（liも .p-talk の flex アイテム）に min-width:0 が無いと、
	   既定の min-width:auto で「中身の最小幅」まで膨らみ、親を突き抜けて右にはみ出す。
	   アバターを36→56pxにしたときに実際に発生した。**吹き出し側だけでは直らない。** */
	min-width: 0;
}
/* ⭐2026-08-31：支給されたアイコンがバストアップの構図になり、36pxでは顔が小さく見えたため拡大
   （カンプも同時に更新：SP03 avatar_face 36→56 / PC03 44→64）。 */
.p-talk__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
}

.p-talk__bubble {
	position: relative;
	/* ⚠2026-08-31：アバターを56pxに大きくしたら吹き出しが右にはみ出した。
	   flexアイテムの min-width は既定 auto なので、内容の最小幅より縮まずに親を突き抜ける。
	   min-width:0 を入れて「残り幅に収まる」ようにする（flex:1 1 auto で残り幅を取る）。 */
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-card);
	font-size: var(--fs-lead);
	line-height: 1.72;
}
/* 吹き出しの尻尾（アバター側に向ける） */
.p-talk__bubble::before {
	content: "";
	position: absolute;
	top: 13px;
	left: -6px;
	width: 11px;
	height: 11px;
	background: inherit;
	border-left: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	transform: rotate(45deg);
	border-bottom-left-radius: 3px;
}

/* チョキペタ側（右寄せ・緑の吹き出し） */
.p-talk__item--ours { flex-direction: row-reverse; }
.p-talk__item--ours .p-talk__bubble {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-white);
	font-weight: 700;
}
.p-talk__item--ours .p-talk__bubble::before {
	left: auto;
	right: -6px;
	border-left: 0;
	border-bottom: 0;
	border-right: 1px solid var(--c-green);
	border-top: 1px solid var(--c-green);
	border-bottom-left-radius: 0;
	border-top-right-radius: 3px;
}

/* 本文カード（段落を積む） */
.p-prose {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: var(--sp-block);
	text-align: left;
	font-size: var(--fs-lead);
	line-height: 1.72;
}

@media (min-width: 900px) {
	.p-talk { gap: 14px; width: 640px; margin-inline: auto; }
	/* PCカンプ（PC03）は元44pxだったので、SPと同じ比率感で64pxに */
	.p-talk__avatar { width: 64px; height: 64px; }
	.p-prose { gap: 14px; max-width: var(--w-narrow); margin-inline: auto; padding: 24px 28px; }
}

/* ============================================================
   21. FAQアコーディオン
   ============================================================ */
.p-faq {
	display: grid;
	gap: var(--sp-card);
}
.p-faq__item {
	padding: 16px 18px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.72;
	cursor: pointer;
	list-style: none;
}
.p-faq__q::-webkit-details-marker { display: none; }
.p-faq__q::after {
	content: "＋";
	flex: none;
	color: var(--c-green);
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
}
.p-faq__item[open] .p-faq__q::after { content: "－"; }
/* 回答は区切り線をはさんで下に出す（カンプ実測：Qとの間10px・線1px・線から10px） */
.p-faq__a {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-lead);
	line-height: 1.72;
}
/* 2026-08-31 UAT No.40：回答に貼られたURL・メールアドレスは自動でリンクになる
   （chokipeta_faq_a_html）。長いURLがSPで横にはみ出さないよう折り返しを許す。 */
.p-faq__a a {
	overflow-wrap: anywhere;
	color: var(--c-green);
	text-decoration: underline;
}

@media (min-width: 900px) {
	.p-faq { max-width: var(--w-narrow); margin-inline: auto; }
	.p-faq__item { padding: 18px 24px; }
	.p-faq__q::after { font-size: 24px; }
}

/* ============================================================
   22. ステップリスト（ご利用の流れ）
   ------------------------------------------------------------
   SP＝写真の下にテキスト／PC＝写真左・テキスト右（カンプ実測）
   ============================================================ */
.p-steps {
	display: grid;
	gap: var(--sp-card);
	counter-reset: none;
}
.p-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-step__photo {
	display: block;
	order: 2;
	overflow: hidden;
	aspect-ratio: 311 / 207;
	border-radius: 8px;
	background: var(--c-palelime);
}
.p-step__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-step__photo--empty {
	background: repeating-linear-gradient(-45deg, #F1F7DA 0 12px, #E8F1CB 12px 24px);
}
.p-step__body { display: contents; }

.p-step__head {
	display: flex;
	align-items: center;
	gap: 10px;
	order: 1;
}
.p-step__badge {
	flex: none;
	padding: 4px 12px;
	border-radius: 15px;
	background: var(--c-palelime);
	color: var(--c-green);
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.72;
}
.p-step__title {
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.72;
}
.p-step__text {
	order: 3;
	font-size: var(--fs-lead);
	line-height: 1.72;
}

@media (min-width: 900px) {
	.p-step {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
		padding: 20px 24px 20px 20px;
	}
	.p-step__photo {
		order: 0;
		flex: none;
		width: 320px;
		aspect-ratio: 320 / 213;
	}
	.p-step__body {
		display: flex;
		flex-direction: column;
		gap: 12px;
		flex: 1 1 auto;
	}
	.p-step__head { order: 0; gap: 12px; }
	.p-step__badge { padding: 5px 14px; border-radius: 17px; }
	.p-step__title { font-size: 24px; }
	.p-step__text { order: 0; }
}

/* ============================================================
   23. 注意事項リスト
   ============================================================ */
.p-notes { padding: 18px; }
.p-notes__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--fs-lead);
	line-height: 1.72;
}
.p-notes__list li {
	position: relative;
	padding-left: 18px;
}
.p-notes__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-lime);
}

/* 見出し付きグループ（ご利用の流れの注意事項）*/
.p-notes__group + .p-notes__group { margin-top: 16px; }
/* 小見出しの下の補足（呼出サービスの「(オンライン受付又はQRコードを読込済)」）
   ⚠.p-notes__head の margin-bottom:8px が上の余白になるので、下だけ足す */
.p-notes__head + .p-subhead { margin-bottom: 8px; }
.p-notes__head {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.72;
	color: var(--c-ink);
	margin-bottom: 8px;
}
.p-notes__body {
	font-size: var(--fs-lead);
	line-height: 1.72;
	color: var(--c-ink);
}

@media (min-width: 900px) {
	.p-notes { max-width: var(--w-narrow); margin-inline: auto; padding: 24px 28px; }
	.p-notes__group + .p-notes__group { margin-top: 18px; }
	.p-notes__head { font-size: 24px; line-height: 1.67; }

	/* カードの直後の※注記も、カードと同じ760px幅に揃える
	   （2026-08-31：そのままだとコンテナ幅1000pxで、カードより120px左に飛び出す） */
	.p-notes + .p-small-notes { max-width: var(--w-narrow); margin-inline: auto; }
}

/* ============================================================
   24. パンくず
   ============================================================ */
.p-breadcrumb { padding-top: 12px; }
.p-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 15px;
	line-height: 1.73;
	color: var(--c-ink);
}
.p-breadcrumb__list li + li::before {
	content: "＞";
	margin-inline: 2px 6px;
	color: var(--c-soft);
}
@media (min-width: 900px) {
	.p-breadcrumb { padding-top: 32px; }
	.p-breadcrumb__list { font-size: 14px; }
}

/* ============================================================
   25. 受付方法の2択カード
   ============================================================ */
.p-methods {
	display: grid;
	gap: var(--sp-card);
}
.p-method {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-method__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.68;
}
.p-method__photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 307 / 160;
	border-radius: 8px;
	background: var(--c-palelime);
}
.p-method__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-method__photo--empty {
	background: repeating-linear-gradient(-45deg, #F1F7DA 0 12px, #E8F1CB 12px 24px);
}
.p-method__text { font-size: var(--fs-lead); line-height: 1.72; }
/* ボタンは下端揃え（本文の行数が違ってもボタン位置が揃う） */
.p-method .c-btn { margin-top: auto; }

@media (min-width: 900px) {
	.p-methods { grid-template-columns: 1fr 1fr; }
	.p-method { padding: 24px; }
	.p-method__title { font-size: 24px; }
}

/* ============================================================
   26. ステップ（写真なしのコンパクト版）
   ============================================================ */
.p-steps--compact .p-step { gap: 8px; }
.p-steps--compact .p-step__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
@media (min-width: 900px) {
	.p-steps--compact .p-step { flex-direction: column; padding: 16px; }
}

/* 760px幅の中央カラム（PCのみ効く） */
.p-narrow > * + * { margin-top: var(--sp-block); }
@media (min-width: 900px) {
	.p-narrow { max-width: var(--w-narrow); margin-inline: auto; }
}

/* ============================================================
   27. ※注記の小さいリスト・小見出し
   ============================================================ */
.p-small-notes {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	line-height: 1.73;
	color: var(--c-ink);
}
.p-small-notes li { padding-left: 1.2em; text-indent: -1.2em; }
.p-small-notes li::before { content: "※"; }

.p-subhead {
	font-size: var(--fs-lead);
	line-height: 1.72;
	color: var(--c-soft);
}
/* 見出し直後の小見出しは間隔を詰める */
.l-section > .l-container > .c-heading + .p-subhead { margin-top: 4px; }

/* ============================================================
   28. 情報テーブル（会社概要など）
   ------------------------------------------------------------
   2列組みは禁止。ラベルを上・値を下に積む（デザインルール）。
   ============================================================ */
.p-info {
	/* 余白は比較表（.p-compare）と同じ値に揃える（中村さん指示 2026-08-14）。
	   カード padding＋行 padding の合計で、比較表と同じ見た目の余白になる。 */
	padding: 8px 16px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-sitemap);
}
.p-info__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 0;
}
.p-info__row + .p-info__row { border-top: 1px solid var(--c-line); }
.p-info__label {
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.72;
}
.p-info__value {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.72;
}
@media (min-width: 900px) {
	.p-info { padding: 12px 32px; border-radius: 24px; }
	/* PCはあえての2列組み（カンプ準拠：ラベル150px＋gap42px） */
	.p-info__row {
		flex-direction: row;
		gap: 42px;
		padding: 14px 0 13px;
	}
	.p-info__label { flex: none; width: 150px; }
	.p-info__value { flex: 1 1 auto; }
	/* 店舗詳細（PC17）はPCでも行積み＝2カラムの中に入るため */
	.p-info--stack { padding: 12px 24px; }
	.p-info--stack .p-info__row { flex-direction: column; gap: 4px; padding: 16px 0; }
}

/* ============================================================
   29. 外部リンクカード（会社概要の関連リンク）
   ============================================================ */
.p-linkcards {
	display: grid;
	gap: var(--sp-card);
}
.p-linkcard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 82px;
	padding: 14px 17px 14px 20px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-linkcard:hover { text-decoration: none; opacity: .92; }
.p-linkcard__body { display: flex; flex-direction: column; gap: 6px; }
.p-linkcard__title { font-size: 19px; font-weight: 700; line-height: 1.42; }
.p-linkcard__note { font-size: 14px; line-height: 1.43; color: var(--c-soft); }
.p-linkcard__arrow {
	flex: none;
	color: var(--c-green);
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--icon-external) no-repeat center / contain;
	mask: var(--icon-external) no-repeat center / contain;
}

@media (min-width: 900px) {
	.p-linkcards { grid-template-columns: 1fr 1fr; }
	.p-linkcard { min-height: 88px; padding: 14px 22px 14px 28px; }
	.p-linkcard__title { font-size: 20px; }
	.p-linkcard__arrow { width: 22px; height: 22px; }
}

/* ============================================================
   30. お問い合わせカード（控えめ版・会社概要の下部）
   2026-08-31: 窓口が2つ（業者様専用／店舗物件情報募集）になったため
   1枚の横並びカード → 2枚のカードを並べるグリッドに変更（UAT No.39）。
   説明文の長さをそろえてあるが、念のためボタンは下揃え（下記 margin-bottom:auto）。
   「別タブで開きます」の注記はボタン内の外部リンクアイコンに任せて廃止。
   ============================================================ */
.p-contacts {
	display: grid;
	gap: 16px;
}
.p-contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	background: var(--c-white);
	border-radius: var(--r-card);
}
.p-contact__title { font-size: var(--fs-lead); font-weight: 700; line-height: 1.56; }
/* margin-bottom:auto で説明文が余白を吸収＝カードの高さが違ってもボタンが下で揃う */
.p-contact__text { margin-bottom: auto; font-size: 16px; line-height: 1.72; }
.p-contact__btn { width: 100%; margin-top: 14px; min-height: 48px; font-size: 16px; }

@media (min-width: 900px) {
	.p-contacts { grid-template-columns: 1fr 1fr; gap: 24px; }
	.p-contact { padding: 24px 32px; border-radius: var(--r-sitemap); }
	/* PCの見出しはカンプ準拠で20px（SPは18px） */
	.p-contact__title { font-size: 20px; }
	.p-contact__text { font-size: 18px; }
	.p-contact__btn { margin-top: 18px; min-height: 52px; font-size: 17px; }
}

/* ============================================================
   31. 規約ページ（プライバシーポリシー等）
   ============================================================ */
.p-policy {
	padding: 20px 18px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
	font-size: var(--fs-lead);
	line-height: 1.72;
}
.p-policy > * + * { margin-top: 16px; }

.p-policy__h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 16px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.72;
}
.p-policy__h2::before {
	content: "";
	flex: none;
	width: 4px;
	height: 22px;
	background: var(--c-green);
}
.p-policy > .p-policy__h2:first-child { padding-top: 0; }

.p-policy__h3 {
	padding-top: 8px;
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.72;
}
/* 箇条書き（カスハラ方針の定義リスト等）＝原稿の「・」を再現する */
.p-policy__list {
	padding-left: 1.1em;
	list-style: none;
}
.p-policy__list > li {
	position: relative;
	padding-left: 0.2em;
}
.p-policy__list > li::before {
	content: "・";
	position: absolute;
	left: -1.1em;
}
.p-policy__list > li + li { margin-top: 6px; }

/* 署名・「以上」の右寄せ */
.p-policy__right { text-align: right; }

.p-policy__note {
	font-size: 15px;
	line-height: 1.73;
	color: var(--c-soft);
	padding-left: 1.2em;
	text-indent: -1.2em;
}
.p-policy__note::before { content: "※"; }

@media (min-width: 900px) {
	.p-policy {
		max-width: var(--w-narrow);
		margin-inline: auto;
		padding: 32px;
	}
	.p-policy__h2 { font-size: 24px; }
}

/* ============================================================
   32. 料金一覧（カテゴリ別アコーディオン）
   ============================================================ */
.p-prices {
	display: grid;
	gap: var(--sp-card);
}
.p-prices__item {
	padding: 0 20px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-prices__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.72;
	cursor: pointer;
	list-style: none;
}
.p-prices__head::-webkit-details-marker { display: none; }
.p-prices__head::after {
	content: "＋";
	flex: none;
	color: var(--c-green);
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
}
.p-prices__item[open] .p-prices__head::after { content: "－"; }

.p-prices__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	/* ⚠SPは8px。12pxやとメニュー名の枠が215pxしか取れず、「クリニックトリートメント」
	   （12字＝216px）が1文字だけあふれて3行になる。 */
	gap: 8px;
	padding: 14px 0;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-lead);
}
.p-prices__row dd {
	margin: 0;
	flex: none;
	color: var(--c-green);
	font-size: var(--fs-h3);
	font-weight: 700;
}
/* カテゴリのカードの下に出す注釈（カンプSP08 1534:2＝15px / lh26 / --c-soft）。
   .p-prices の grid 直下に置くので、カードとの間隔は --sp-card(16px)＝カンプと同値。 */
.p-prices__note { color: var(--c-soft); font-size: 15px; line-height: 1.73; }

@media (min-width: 900px) {
	.p-prices { max-width: var(--w-narrow); margin-inline: auto; }
	.p-prices__item { padding: 0 32px; }
	.p-prices__head { padding: 14px 0; font-size: 24px; }
	.p-prices__head::after { font-size: 24px; }
	.p-prices__row { gap: 12px; padding: 14px 0; }
	.p-prices__row dd { font-size: 24px; }
	.p-prices__note { font-size: 16px; }
}

/* ============================================================
   33. 料金シミュレーター
   ============================================================ */
.p-sim > * + * { margin-top: var(--sp-block); }

.p-sim__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
}
.p-sim__q { display: flex; flex-direction: column; gap: 10px; }
.p-sim__label { font-size: var(--fs-lead); font-weight: 700; line-height: 1.72; }
.p-sim__stepno { margin-right: 1em; }
.p-sim__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.p-sim__chip {
	padding: 8px 16px;
	background: var(--c-white);
	border: 1.5px solid var(--c-line);
	border-radius: 20px;
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--fs-lead);
	line-height: 1.72;
	cursor: pointer;
}
.p-sim__chip-price { margin-left: 1em; white-space: nowrap; }

/* 選択肢のラベルが長い質問（トリートメント等）は、チップを横に並べると
   途中で折り返して読みにくいので「1行1件・ラベル左／金額右」のリストにする。 */
.p-sim__chips--list { flex-direction: column; gap: 10px; }
.p-sim__chips--list .p-sim__chip {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: 14px;
	text-align: left;
}
/* 1行目＝名前（左）＋金額（右）。金額は必ずこの行の右端に置く */
.p-sim__chip-main {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.p-sim__chip-main .p-sim__chip-label { flex: 1 1 auto; }
.p-sim__chip-main .p-sim__chip-price { flex: none; margin-left: auto; }
/* 幅の狭い端末だけ、名前が2行に折れないよう1段小さくする */
@media (max-width: 389px) {
	.p-sim__chip-main .p-sim__chip-label,
	.p-sim__chip-main .p-sim__chip-price { font-size: 16px; }
}
/* 2行目＝カッコ書きの補足（名前の途中で折り返さないように別行へ出す） */
.p-sim__chip-sub {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-soft);
}
.p-sim__chip.is-active .p-sim__chip-sub { color: var(--c-white); }
.p-sim__chip.is-active {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-white);
	font-weight: 700;
}

/* 結果カード */
.p-sim__result {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-green);
	border-radius: var(--r-card);
}
.p-sim__badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 14px;
	background: var(--c-palelime);
	color: var(--c-green);
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.72;
}
.p-sim__name { font-size: var(--fs-h2); font-weight: 700; line-height: 1.5; }
.p-sim__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: var(--fs-lead);
}
.p-sim__row dd { margin: 0; flex: none; font-weight: 700; }
.p-sim__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-lead);
	font-weight: 700;
}
.p-sim__price { color: var(--c-green); font-size: 26px; }
/* 「わからない」選択時の補足 */
/* 質問の補足（根元カラーの条件など） */
.p-sim__note {
	font-size: 15px;
	line-height: 1.73;
	color: var(--c-soft);
}
/* 「この内容で計算する」ボタン（答えが揃ったら出る） */
.p-sim__confirm { display: flex; justify-content: center; padding-top: 4px; }
.p-sim__done { min-height: 52px; padding-inline: 32px; }

@media (min-width: 900px) {
	.p-sim { max-width: var(--w-narrow); margin-inline: auto; }
	.p-sim__chips--list .p-sim__chip { padding: 14px 20px; }
	.p-sim__card { gap: 24px; padding: 28px 32px; }
	.p-sim__result { padding: 28px 32px; }
	.p-sim__price { font-size: 32px; }
}

/* ============================================================
   35. 店舗一覧（カード・ページャ・エリアチップ）
   ============================================================ */
.p-shoplist {
	display: grid;
	gap: var(--sp-card);
}
.p-shopcard {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 100px;
	padding: 14px 14px 14px 16px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-shopcard:hover { text-decoration: none; opacity: .92; }
.p-shopcard__photo {
	flex: none;
	display: block;
	overflow: hidden;
	width: 72px; height: 72px;
	border-radius: 8px;
	background: var(--c-palelime);
}
.p-shopcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-shopcard__name { flex: 1 1 auto; font-size: var(--fs-lead); font-weight: 700; line-height: 1.72; }
.p-shopcard__arrow { flex: none; color: var(--c-green); font-size: 24px; }

@media (min-width: 900px) {
	.p-shoplist { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.p-shopcard { padding: 16px; }
}

/* ページャ */
.p-pager { margin-top: var(--sp-block); }
.p-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.p-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 36px; height: 36px;
	padding: 0 8px;
	border-radius: 18px;
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-line);
	font-size: var(--fs-lead);
	line-height: 1;
}
.p-pager .page-numbers.current {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-white);
	font-weight: 700;
}
.p-pager .page-numbers.dots { border: 0; background: none; color: var(--c-soft); }
.p-pager .prev, .p-pager .next { border: 0; background: none; color: var(--c-green); font-size: var(--fs-lead); }
.p-pager .prev { color: var(--c-soft); }
.p-pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 900px) {
	/* カンプPC18/PC24：40px・gap12 */
	.p-pager .nav-links { gap: 12px; }
	.p-pager .page-numbers { min-width: 40px; height: 40px; border-radius: 20px; }
}

/* 他のエリアから探す */
.p-areas { padding: 16px; }
.p-areas__list { display: flex; flex-wrap: wrap; gap: 8px; }
.p-areas__chip {
	display: inline-block;
	padding: 6px 16px;
	background: var(--c-white);
	border-radius: 18px;
	font-size: var(--fs-lead);
	line-height: 1.72;
}
.p-areas__chip:hover { text-decoration: none; opacity: .88; }
@media (min-width: 900px) {
	.p-areas { padding: 20px; }
}

/* 絞り込みプレートはボタン無しなので中央寄せしない */
.p-shop-search--filter { display: block; }
@media (min-width: 900px) {
	.p-shop-search--filter { max-width: var(--w-narrow); }
	.p-shop-search--filter .p-shop-search__select { width: 100%; }
}

/* ============================================================
   36. 店舗詳細
   ============================================================ */
.p-hero--shop .p-hero__title { font-size: var(--fs-h1); }
/* 店舗詳細のヒーローのチップ（カンプ実測：白・Bold・1つだけ。中身は電話番号） */
.p-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.p-hero__chip {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 16px;
	background: var(--c-white);
	color: var(--c-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.54;
}
a.p-hero__chip:hover { text-decoration: none; opacity: .88; }
@media (min-width: 900px) {
	.p-hero__chips { gap: 12px; margin-top: 34px; }
	.p-hero__chip { padding: 8px 18px; border-radius: 18px; font-size: 16px; }
}

/* 写真＋店舗情報（PCは2カラム。カンプ実測：写真480／情報496／gap24） */
.p-shoptop > .l-container { display: grid; gap: var(--sp-block); }
.l-section.p-shoptop > .l-container > * + * { margin-top: 0; }
.p-shoptop__info > * + * { margin-top: 16px; }
@media (min-width: 900px) {
	/* PCは「店舗情報が左（496）／写真が右（480）」＝カンプ 795:2 準拠（2026-08-24 変更）。
	   SPは写真→店舗情報の順のままなので、DOMは触らずグリッドの行・列指定で入れ替える。
	   ⭐見出し「店舗情報」を1行目・白カードと写真を2行目に置くことで、
	     写真の上端が左のカードの上端とそろう（カンプも photo_carousel と info_card が同じ y=575）。 */
	.p-shoptop > .l-container {
		grid-template-columns: 496fr 480fr;
		grid-template-rows: auto auto;
		column-gap: 24px;
		row-gap: 32px;
		align-items: start;
	}
	.p-shoptop__info { display: contents; }
	.p-shoptop__info > .c-heading { grid-column: 1; grid-row: 1; }
	.p-shoptop__info > .p-info { grid-column: 1; grid-row: 2; }
	.p-shoptop .p-carousel { grid-column: 2; grid-row: 2; }
	.p-shoptop__info > * + * { margin-top: 0; }
	/* 写真が1枚も無い店舗（新店など）は右側が空くので1カラムにする */
	.p-shoptop > .l-container:not(:has(.p-carousel)) { grid-template-columns: 1fr; }
}

/* 写真カルーセル（SP=スワイプ＋ドット／PC=メイン画像＋サムネイル3枚） */
.p-carousel { padding: 0; }
.p-carousel__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.p-carousel__track::-webkit-scrollbar { display: none; }
.p-carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	overflow: hidden;
	aspect-ratio: 343 / 229;
	border-radius: var(--r-card);
	background: var(--c-palelime);
}
.p-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.p-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}
.p-carousel__dots span {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-line);
	cursor: pointer;
}
.p-carousel__dots span.is-active { background: var(--c-green); }

/* サムネイル（PCだけ。カンプ実測：152x101・gap12・r12、選択中は緑3px） */
.p-carousel__thumbs { display: none; }
@media (min-width: 900px) {
	.p-carousel__slide { aspect-ratio: 480 / 320; border-radius: 20px; }
	.p-carousel__dots { display: none; }
	.p-carousel__thumbs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		margin-top: 16px;
	}
	.p-carousel__thumb {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
		overflow: hidden;
		aspect-ratio: 152 / 101;
		border-radius: 12px;
		background: var(--c-palelime);
		cursor: pointer;
	}
	.p-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; }
	.p-carousel__thumb:hover { opacity: .9; }
	.p-carousel__thumb.is-active { outline: 3px solid var(--c-green); outline-offset: -3px; }
}

/* 地図 */
.p-map {
	overflow: hidden;
	aspect-ratio: 343 / 229;
	border-radius: var(--r-card);
	background: var(--c-palelime);
}
.p-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 900px) {
	.p-map { max-width: var(--w-narrow); margin-inline: auto; aspect-ratio: 760 / 380; }
}

/* LINEカード（カンプ実測：白カード・左寄せ・PCはQR付きの横並び） */
.p-line {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 24px 32px;
	background: var(--c-white);
	border-radius: var(--r-card);
	text-align: center;
}
.p-line__title { font-size: 22px; font-weight: 700; line-height: 1.6; }
.p-line__body { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* LINE公式の友だち追加ボタン（緑・角丸4・アイコン＋文字） */
.p-line__btn {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 232px;
	height: 72px;
	border-radius: 4px;
	background: var(--c-line-green);
	color: var(--c-white);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}
.p-line__btn:hover { text-decoration: none; opacity: .92; }
.p-line__btn img { width: 62px; height: 62px; }

@media (min-width: 900px) {
	/* SP/PCともに中身はセンター寄せ（中村さん指示） */
	.p-line {
		gap: 40px;
		max-width: var(--w-narrow);
		margin-inline: auto;
		padding: 40px;
		border-radius: 24px;
	}
	.p-line__body { gap: 10px; }
	.p-line__title { font-size: 24px; }
	.p-line__title br { display: none; }
	.p-line__btn { align-self: center; margin-top: 6px; }
}

/* LINE追従バナー */
.p-line-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px 12px 14px;
	border-radius: 999px;
	background: var(--c-line-green);
	color: var(--c-white);
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(82, 59, 37, .24);
	transition: opacity .2s, transform .2s;
}
/* アイコンは文字(16px)に対して34px。24pxだと小さくてバランスが悪い（中村さん指摘） */
.p-line-float img { width: 34px; height: 34px; flex: none; }
.p-line-float:hover { text-decoration: none; opacity: .92; }
.p-line-float.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* ============================================================
   37. 記事系（お知らせ・ブログ）
   ------------------------------------------------------------
   一覧＝カンプ SP18/SP24・PC18/PC24（SPはサムネ64pxの横並び／PCは3列の縦積み）
   詳細＝カンプ SP19/SP25・PC19/PC25、本文パーツの一覧は SP25b/PC25b
   ============================================================ */

/* ---- 一覧のカード ---- */
.p-articles {
	display: grid;
	gap: 16px;
}
.p-article-card {
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-article-card__link {
	display: flex;
	gap: 14px;
	padding: 16px;
	color: var(--c-ink);
}
.p-article-card__link:hover { text-decoration: none; opacity: .92; }
/* 記事カードのサムネ
   ⭐2026-08-31：**画像を切らない**（UAT No.43の続き。一覧も直してほしい＝先方要望）。
   旧サイトから移行した記事画像は全件1200×848（7:5）。ここは SP 64×64の正方形／PC 290/163（16:9）
   だったため、SPは左右が3割、PCは上下が2割トリミングされていた。
   → **枠を7:5（画像の実比率）にし、`object-fit: contain` で他の比率でも切らない**。
      7:5の画像は余白ゼロでぴったり埋まる。16:9を入れた場合だけ上下にわずかな余白が出る。
   ⚠余白の色はカード地と同じ白にして目立たせない（画像が無いときは noimage 画像が入る）。 */
.p-article-card__thumb {
	flex: none;
	width: 64px;
	height: auto;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	border-radius: 8px;
	background: var(--c-white);
}
.p-article-card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.p-article-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.p-article-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 18px;
	line-height: 1.72;
	color: var(--c-soft);
}
.p-article-card__cat { color: var(--c-green); }
.p-article-card__title { font-size: 18px; font-weight: 700; line-height: 1.72; }

@media (min-width: 900px) {
	/* PCは3列。カード内は縦積みでサムネ290x163相当 */
	.p-articles { grid-template-columns: repeat(3, 1fr); }
	.p-articles--rel { gap: 20px; }
	.p-article-card__link {
		flex-direction: column;
		gap: 10px;
		height: 100%;
		padding: 16px 16px 18px;
	}
	/* ⚠2026-08-31：aspect-ratio(290/163=16:9) をやめ、SPと同じ 7/5 を継いで画像を切らない */
	.p-article-card__thumb { width: 100%; height: auto; }
	.p-article-card__meta { gap: 10px; line-height: 1.5; }
	.p-article-card__title { font-size: 20px; line-height: 1.55; }
}

/* ---- カテゴリタブ（ブログ。カンプどおり一覧＋ページャの下） ---- */
.p-tabs { padding-top: 16px; }
.p-tabs__list { display: flex; flex-wrap: wrap; gap: 8px; }
.p-tabs__tab {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 18px;
	background: var(--c-white);
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.72;
}
.p-tabs__tab:hover { text-decoration: none; opacity: .9; }
.p-tabs__tab.is-active { background: var(--c-green); color: var(--c-white); }
@media (min-width: 900px) {
	.p-tabs { padding-top: 12px; }
	.p-tabs__list { gap: 10px; }
	.p-tabs__tab { padding: 8px 18px; border-radius: 20px; font-size: 20px; line-height: 1.45; }
}

/* ---- 記事ヘッダー ---- */
.p-article__header { padding-top: 20px; }
.p-article__head-inner { display: flex; flex-direction: column; gap: 8px; }
.p-article__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.p-article__tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 14px;
	background: var(--c-white);
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.72;
}
.p-article__tag:hover { text-decoration: none; opacity: .9; }
.p-article__title { font-size: 24px; font-weight: 700; line-height: 1.5; }
.p-article__date { font-size: 18px; line-height: 1.72; color: var(--c-soft); }
/* 記事詳細のアイキャッチ
   ------------------------------------------------------------
   ⭐2026-08-31：**枠の比率を決めずに、画像の比率のまま全部見せる**に変更（UAT No.43）。
   きっかけ＝クライアントから「ニュースの画像が見切れている」というご質問。
   旧サイトから移行した記事の画像は **全件が1200×848（7:5）** で統一されているのに対し、
   ここは SP 3:2 / PC 16:9 の枠に `object-fit: cover` で敷いていたため、
   **PCで上下が約20%切り落とされていた**（告知画像は文字が入っているので読めなくなる）。
   ⚠実測：/news の98件すべて比率1.33〜1.45＝縦長画像は無い。最大でも760×572pxに収まる。
   ⚠一覧カード・関連記事のサムネは16:9のまま（カードの高さを揃える必要があるため）。
     一覧では引き続き中央トリミングになる＝詳細で全体が見える、という切り分け。
   ⚠`max-height` + `object-fit: contain` は将来の保険。極端に縦長な画像を入れられても
     切らずに縮めて収める（横長画像には効かない）。 */
.p-article__eyecatch {
	overflow: hidden;
	border-radius: var(--r-card);
	background: var(--c-line);
}
.p-article__eyecatch img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}

@media (min-width: 900px) {
	.p-article__header { padding-top: 24px; }
	.p-article__head-inner {
		max-width: var(--w-narrow);
		margin-inline: auto;
		gap: 12px;
	}
	/* ⚠l-containerの左右paddingで760が696に縮むので、内側の箱で760を確保する */
	.p-article__title { font-size: 32px; line-height: 1.44; }
	.p-article__date { font-size: 20px; line-height: 1.6; }
	/* ⚠aspect-ratio(760/428) は 2026-08-31 に撤去した（上の .p-article__eyecatch のコメント参照） */
}

/* ---- 本文カード（WYSIWYGの出力をカンプのパーツ体裁に合わせる） ---- */
.p-article__body {
	padding: 20px 18px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
	font-size: 18px;
	line-height: 1.72;
}
.p-article__body > * + * { margin-top: 16px; }
.p-article__body > :first-child { margin-top: 0; }

/* 大見出し(H2)＝緑バー＋21px（カンプ：上に16＋ブロック間16＝32） */
.p-article__body h2 {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.71;
}
.p-article__body > h2 + * { margin-top: 16px; }
.p-article__body > * + h2 { margin-top: 32px; }
.p-article__body h2::before {
	content: "";
	flex: none;
	width: 4px; height: 22px;
	margin-top: 7px;
	border-radius: 2px;
	background: var(--c-green);
}
/* 小見出し(H3)＝バーなし（カンプ：上に8＋16＝24） */
.p-article__body h3 { font-size: 21px; font-weight: 700; line-height: 1.71; }
.p-article__body > * + h3 { margin-top: 24px; }

.p-article__body strong { font-weight: 700; }
.p-article__body a { color: var(--c-green); font-weight: 700; }
/* 記事本文に置いたボタンの上余白はカンプ通り24px（.c-btn-row の定義より後に書いて勝たせる） */
.p-article__body > .c-btn-row { margin-top: 24px; }
/* 本文内リンクの緑（上の `.p-article__body a`）がボタンにも効いてしまうので、
   ボタン側の文字色をここで明示する。
   ⚠**2026-08-22 修正**：ここは長らく `color: var(--c-white)` だった。
     2026-08-18 に「プライマリー（緑塗り）を廃止して全ボタンを白地＋緑線に統一」
     （クライアント要望・`.c-btn` の定義を変更）した際に、この打ち消しを直し忘れており、
     **記事本文に置いたボタンだけ白地に白文字＝文字が見えない**状態になっていた。
     `.c-btn` 側は緑文字になっているので、ここも緑に揃える。
   ⚠`.c-btn--line`（LINEグリーンの塗り）だけは白抜きのままにする。 */
.p-article__body a.c-btn,
.p-article__body a.c-btn--outline { color: var(--c-green); }
.p-article__body a.c-btn--line { color: var(--c-white); }

/* 記事本文の「ボタン」ブロック（WP標準の core/button）
   ------------------------------------------------------------
   2026-08-28 中村さん指摘「本文パーツのボタンが一発で同じ形にならない」への対応。
   これまで本文のボタンは `<p class="c-btn-row"><a class="c-btn">` を
   **カスタムHTMLブロックに手打ち**する運用だった（import/_sample_article_parts.html 参照）。
   クラスを1つ書き損なうとただのテキストリンクになるため、編集者が同じ形を再現できない。
   → WP標準の「ボタン」ブロックを置くだけで `.c-btn` と同じ見た目になるようにする。
      リンク先と文字は標準UIで入れられるので、HTMLを触る必要が無くなる。
   ⚠見た目の正は section 5 の `.c-btn`。値を変えたらこちらも、
     エディタ側（assets/css/editor-v2.css）も揃えること。
   ⚠既存記事のカスタムHTML（`.c-btn`）はそのまま生きる。書き換えは不要。
   ⚠矢印（← / →）は `.c-btn` の運用と同じで、ボタンの文字として打ってもらう。 */
.p-article__body .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	/* ボタンブロックの既定は左寄せだが、カンプは中央。既定を中央にしておく。
	   ⚠エディタの「項目の揃え」で左/右を選んだ場合は下の2行で戻す
	     （WPが生成する `.wp-container-...` は1クラス＝詳細度で負けるため、
	      `is-content-justification-*` を明示して拾う）。 */
	justify-content: center;
}
.p-article__body .wp-block-buttons.is-content-justification-left { justify-content: flex-start; }
.p-article__body .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.p-article__body > * + .wp-block-buttons { margin-top: 24px; }

/* ⚠幅は「幅の設定」（25/50/75/100%）を残してあるので、
     明示指定が無いときだけこちらで決める。core は幅を選ぶと
     `.wp-block-button` に `has-custom-width` を足すので、それを避ける。 */
.p-article__body .wp-block-button:not(.has-custom-width) { width: 100%; }
.p-article__body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	width: 100%;
	min-height: 56px;
	padding: 12px 28px;
	border-radius: 999px;
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-green);
	/* ⚠`.p-article__body a`（本文内リンクの緑・太字）より後に書いて勝たせる。
	     コア側の `.wp-block-button__link`（白文字＋濃灰の塗り）も2クラスで上書きする。 */
	color: var(--c-green);
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}
.p-article__body .wp-block-button__link:hover { text-decoration: none; opacity: .88; }
/* 黄色マーカー */
/* ハイライト（マーカー）
   ------------------------------------------------------------
   ⚠**背景色を linear-gradient で塗ってはいけない**（2026-08-18、C&P様ご指摘で修正）。
   エディタで色を選ぶと `<mark style="background-color:○○">` が出力されるが、
   こちらが `background` ショートハンドで黄色のグラデーションを描いていたため
   **どの色を選んでも黄色のまま**になっていた。さらに `color` を指定していたので
   **本文の文字色まで上書き**されていた。
   正しくは「選んだ背景色はそのまま活かし、上半分だけを紙の色で隠して帯にする」。
   `background-image` は `background-color` の上に描画されるので、
   上55%を白で塗れば下45%だけが選んだ色の帯として残る。 */
.p-article__body mark {
	color: inherit;
}
/* ⚠**太字と帯は「背景色を付けたとき」だけに限定する。**
   WordPressは文字色だけを変えた場合も `<mark>` で囲む（`has-inline-color` が付く）。
   `mark` 全体に font-weight:700 を当てると、**文字色を変えただけで勝手に太字になる**
   （2026-08-18、C&P様ご指摘で発覚）。
   パレットの背景色を選んだときは `has-○○-background-color` が付くので、
   文字色と背景色を同時に指定したケースもそちらで拾う。 */
.p-article__body mark:not(.has-inline-color),
.p-article__body mark.chokipeta-marker,
.p-article__body mark[class*="-background-color"] {
	font-weight: 700;
	background-image: linear-gradient(to bottom, var(--c-white) 0 55%, transparent 55%);
}

/* リスト */
.p-article__body ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.p-article__body ul > li { position: relative; padding-left: 18px; }
.p-article__body ul > li::before {
	content: "";
	position: absolute;
	left: 0; top: 10px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-lime);
}
.p-article__body ol { display: flex; flex-direction: column; gap: 8px; padding-left: 1.5em; }
.p-article__body ol > li::marker { color: var(--c-green); font-weight: 700; }

/* 画像＋キャプション */
.p-article__body img { max-width: 100%; height: auto; border-radius: 12px; }
/* ⚠`margin:0`にすると`> * + *`のmargin-topまで消えて画像の上の余白が0になる（踏んだ） */
.p-article__body figure { margin-right: 0; margin-bottom: 0; margin-left: 0; }
.p-article__body figcaption {
	margin-top: 8px;
	font-size: 18px;
	line-height: 1.72;
	color: var(--c-soft);
}
.p-article__body figcaption::before { content: "▲ "; }
/* 画像2枚並び（ブロックエディタのカラム／`.p-two-imgs`） */
.p-article__body .wp-block-columns,
.p-article__body .p-two-imgs { display: flex; gap: 12px; }
.p-article__body .wp-block-columns > *,
.p-article__body .p-two-imgs > * { flex: 1 1 0; min-width: 0; }
.p-article__body .p-two-imgs img { border-radius: 8px; }

/* 表 */
.p-article__body table {
	width: 100%;
	border-collapse: collapse;
	padding: 0 16px;
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-article__body table th,
.p-article__body table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.p-article__body table th { font-weight: 700; white-space: nowrap; }
.p-article__body table tr + tr th,
.p-article__body table tr + tr td { border-top: 1px solid var(--c-line); }
.p-article__body figure.wp-block-table { overflow-x: auto; }

/* 区切り（core/separator）とギャラリー（core/gallery）
   ------------------------------------------------------------
   2026-08-28 追加。マニュアル3-3の12部品には無いが、汎用の編集ブロックとして
   インサーターに残す判断になったため（→ inc/editor.php）、体裁を当てておく。
   当てないとコア既定の見た目（濃い線・素の間隔）で記事に出てしまう。 */
.p-article__body hr {
	height: 0;
	border: 0;
	border-top: 1px solid var(--c-line);
}
/* ギャラリーは画像の間隔だけ。角丸は `.p-article__body img` が付ける */
.p-article__body .wp-block-gallery { gap: 12px; }

/* 囲み枠 */
.p-article__body .p-box {
	padding: 16px;
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-green);
	border-radius: 12px;
}
.p-article__body .p-box > * + * { margin-top: 8px; }
.p-article__body .p-box__title { color: var(--c-green); font-weight: 700; }

/* 引用 */
.p-article__body blockquote {
	padding: 12px 16px;
	border-left: 4px solid var(--c-line);
	color: var(--c-soft);
}

/* YouTube等の埋め込み（比率16:9） */
.p-article__body iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--r-card);
	background: #332E26;
}

/* CTAボタン（`.c-btn`をそのまま使う）とスペーサー */
.p-article__body .c-btn { width: 100%; }
.p-article__body .p-spacer { height: 24px; }

@media (min-width: 900px) {
	.p-article__body {
		max-width: var(--w-narrow);
		margin-inline: auto;
		padding: 32px;
		font-size: 20px;
		line-height: 1.65;
	}
	.p-article__body h2 { gap: 10px; font-size: 24px; line-height: 1.46; }
	.p-article__body h2::before { width: 5px; height: 26px; margin-top: 5px; }
	.p-article__body h3 { font-size: 19px; line-height: 1.47; }
	.p-article__body ul > li::before { top: 11px; }
	.p-article__body ul > li { padding-left: 20px; }
	.p-article__body figcaption { line-height: 1.5; }
	.p-article__body .c-btn { width: auto; min-width: 360px; }
	.p-article__body > * + .c-btn-row { margin-top: 24px; }
	.p-article__body .wp-block-button:not(.has-custom-width) { width: auto; }
	.p-article__body .wp-block-button:not(.has-custom-width) .wp-block-button__link { width: auto; min-width: 360px; }
}

/* ============================================================
   38. グレードアップメニュー（/premium）
   ------------------------------------------------------------
   一覧＝カンプ SP20=1497:2 / PC20=1588:2（カードはSP縦積み・PC3列）
   詳細＝カンプ SP21/21b/21c・PC21/21b/21c（料金カード＋比較表）
   ============================================================ */
.p-menucards { display: grid; gap: 16px; }
.p-menucard {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-menucard__title { font-size: 21px; font-weight: 700; line-height: 1.71; }
.p-menucard__price { font-size: 18px; font-weight: 700; line-height: 1.72; color: var(--c-green); }
.p-menucard__text { font-size: 18px; line-height: 1.72; }
.p-menucard .c-btn { margin-top: auto; }
@media (min-width: 900px) {
	.p-menucards { grid-template-columns: repeat(3, 1fr); }
	.p-menucard { padding: 16px 16px 20px; }
	.p-menucard__title { font-size: 24px; line-height: 1.46; }
	.p-menucard__price,
	.p-menucard__text { font-size: 20px; line-height: 1.65; }
}

/* 料金カード（枠線なしの白カード・中央寄せ） */
.p-pricecard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: var(--c-white);
	border-radius: var(--r-card);
	/* カンプ 1498:123 は左揃え（旧デザインは中央揃えだった） */
	text-align: left;
}
/* ⚠`.p-pricecard__main`（緑の大きい価格）と `.p-pricecard__note` は 2026-08-21 に削除。
   前者はクライアント指示で非表示化（pm_price_diff 廃止）、後者は pm_price_note 廃止で孤児になっていた。 */

/* 価格の下に入る説明文（WYSIWYG）。段落・太字・番号付きリストが入る */
.p-pricecard__body { font-size: var(--fs-lead); line-height: 1.72; }
.p-pricecard__body > * + * { margin-top: 6px; }
.p-pricecard__body strong { font-weight: 700; }
.p-pricecard__body ol {
	margin: 6px 0 0;
	padding-left: 1.6em;
	list-style: decimal;
}
.p-pricecard__body ol li { margin-top: 4px; }
.p-pricecard__body ul {
	margin: 6px 0 0;
	padding-left: 1.3em;
	list-style: disc;
}
.p-pricecard__body ul li { margin-top: 4px; }
@media (min-width: 900px) {
	.p-pricecard {
		max-width: var(--w-narrow);
		margin-inline: auto;
		padding: 24px 20px;
	}
	.p-pricecard__body { font-size: 20px; line-height: 1.6; }
}

/* 比較表の線バージョン（/premium はアンバーではなく通常の枠線） */
.p-compare--line { border-color: var(--c-line); }
@media (min-width: 900px) {
	/* /premium の比較表はこれまでどおり760px中央寄せのまま
	   （2026-08-24に .p-compare の max-width を外したので、こちらで明示的に戻す）。 */
	.p-compare--line {
		padding: 8px 20px;
		max-width: var(--w-narrow);
		margin-inline: auto;
	}
}

/* ============================================================
   39. おうちケア商品（/homecare）
   ------------------------------------------------------------
   一覧＝カンプ SP22=1501:2 / PC22=1588:248（カテゴリーカード SP2列・PC3列）
   カテゴリー別＝SP23=1502:2 / PC23=1590:262（商品はアコーディオン）
   ============================================================ */
.p-catcards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.p-catcard {
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-catcard__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 12px 12px 14px;
	color: var(--c-ink);
}
.p-catcard__link:hover { text-decoration: none; opacity: .92; }
.p-catcard__photo {
	overflow: hidden;
	aspect-ratio: 140 / 92;
	border-radius: 8px;
	background: var(--c-line);
}
.p-catcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-catcard__name { font-size: 18px; font-weight: 700; line-height: 1.72; }
.p-catcard__more { margin-top: auto; color: var(--c-ink); font-size: 18px; font-weight: 700; line-height: 1.72; }

@media (min-width: 900px) {
	.p-catcards { grid-template-columns: repeat(3, 1fr); }
	.p-catcard__link { gap: 10px; padding: 16px 16px 18px; }
	.p-catcard__photo { aspect-ratio: 290 / 163; }
	.p-catcard__name { font-size: 22px; line-height: 1.5; }
	.p-catcard__more { font-size: 20px; line-height: 1.45; }
}

/* 商品アコーディオン */
.p-products { display: grid; gap: 12px; }
.p-product {
	background: var(--c-white);
	border: var(--bw-card) solid var(--c-line);
	border-radius: 12px;
}
.p-product__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
}
.p-product__head::-webkit-details-marker { display: none; }
.p-product__thumb {
	flex: none;
	width: 56px; height: 56px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--c-line);
}
.p-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 開いているときは本文に大きい写真が出るので、ヘッダーのサムネは出さない（カンプ準拠・中村さん指示） */
.p-product[open] .p-product__thumb { display: none; }
.p-product__col { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-product__name { font-size: 16px; font-weight: 700; line-height: 1.4; }
.p-product__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.p-product__price { color: var(--c-green); font-size: 16px; font-weight: 700; line-height: 1.4; }
.p-product__cap { color: var(--c-soft); font-size: 14px; line-height: 1.4; }
/* ブランド名のピル（2026-08-21 クライアント要望）。体裁は診断結果のチップと共通 */
.p-product__brand {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	margin-top: 2px;
	padding: 5px 14px;
	border: 1.5px solid var(--c-line);
	border-radius: 999px;
	background: var(--c-white);
	color: var(--c-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.55;
}
.p-product__toggle { flex: none; color: var(--c-soft); font-size: 14px; line-height: 1; }
.p-product__toggle::before { content: "▼"; }
.p-product[open] .p-product__toggle::before { content: "▲"; }

.p-product__body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.p-product__main { display: flex; flex-direction: column; gap: 12px; }
.p-product__photo { margin: 0; overflow: hidden; aspect-ratio: 300 / 200; border-radius: 8px; background: var(--c-line); }
.p-product__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-product__desc { font-size: 16px; line-height: 1.75; }
.p-product__desc > * + * { margin-top: 12px; }
.p-product__vtitle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
/* 見出し右の動画アイコン（2026-08-18 クライアント要望・ブラウンの円＋白い再生マーク） */
.p-product__vicon {
	flex: none;
	display: inline-flex;
	width: 22px;
	height: 22px;
	color: var(--c-ink);
}
.p-product__vicon svg { display: block; width: 100%; height: 100%; }

/* 使い方動画は埋め込みをやめてテキストリンク（2026-08-17、クライアント指摘）。
   リンクだけは識別性のため緑のまま＝バナー枠線のブラウン統一とは別扱い。 */
.p-product__video { margin-top: 4px; }
.p-product__vlink {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.72;
	color: var(--c-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.p-product__vlink:hover { text-decoration: none; }

@media (min-width: 900px) {
	/* カンプPC23：アコーディオンは内側に16pxの余白（アイテム幅968） */
	.p-products { padding-inline: 16px; }
	.p-product__name,
	.p-product__price,
	/* 「使い方動画」は見出しほど主張させない＝PCでも16pxのまま（UAT No.14） */
	.p-product__vtitle { font-size: 16px; }
	.p-product__vicon { width: 24px; height: 24px; }
	.p-product__brand { margin-top: 4px; padding: 6px 16px; font-size: 14px; }
	.p-product__body { gap: 12px; padding: 0 24px 24px; }
	/* PCは写真左515＋説明右381の横並び（カンプPC23） */
	.p-product__main { flex-direction: row; gap: 24px; align-items: flex-start; }
	.p-product__photo { flex: none; width: 515px; aspect-ratio: 515 / 322; }
	.p-product__desc { flex: 1 1 auto; font-size: 18px; line-height: 1.72; }
}

/* 「お近くの店舗でお求めいただけます」(.p-purchase) は2026-09-07に削除（中村さん指示）。
   使う側のテンプレートが無くなったのでスタイルも撤去した。 */

/* ============================================================
   40. あなたにぴったり診断（/diagnosis）
   ------------------------------------------------------------
   カンプ SP13a=2493:2（Q1）/ SP13b=2496:2（Q3選択中）/ SP14=2498:2（結果）
   ヘッダーはロゴ＋✕だけ・フッターなし。PC版カンプは無いので760px中央に寄せる。
   ============================================================ */
.l-header--diagnosis .l-header__inner { justify-content: space-between; }
.l-header__close {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	color: var(--c-ink);
}
.l-header__close svg { width: 26px; height: 26px; }
.l-header__close path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.l-header__close:hover { opacity: .7; }

/* ヒーロー（カンプ実測：pad(26,16,12)・gap26・title_group gap8・マスコット絶対配置） */
.p-dg-hero { padding: 26px 0 12px; }
.p-dg-hero__inner { position: relative; display: flex; flex-direction: column; gap: 26px; }
.p-dg-hero__title-group { display: flex; flex-direction: column; gap: 8px; }
.p-dg-hero__label { font-size: 14px; font-weight: 700; line-height: 1.43; }
.p-dg-hero__title { font-size: 26px; font-weight: 700; line-height: 1.46; }
/* ⚠リードは右下のマスコットに潜り込むので、<br>で改行位置を決め打ちせず
   「マスコットのぶんだけ空けた幅」を与えて自然折返しさせる。
   96px＝マスコット(pair)80px ＋ 逃げ16px。固定pxにせんのは、幅の広い端末で
   リードだけ短く縮こまるのを避けるため（375で247px・600以上で1行に伸びる）。 */
/* ⚠マスコットはリードの横ではなく**H1の右**に置く（下層ヒーロー .p-hero__chara と同じ考え方）。
   リードの真横に居るとリードを細くするしかなく、カタカナの途中でブツ切りになる。
   H1（「あなたにぴったり診断」260px／「診断結果」104px）の右は空いてるので、
   そこへ逃がせばリードは306pxまで使えて、
   質問「30秒で、おすすめカラーメニューが／わかります」・
   結果「あなたにぴったりのカラーメニューが／見つかりました」と語の切れ目で割れる。
   ⚠306pxは実測値。312以上にすると「…がわ／かります」で割れるので広げすぎない。 */
.p-dg-hero__lead { max-width: 306px; font-size: 18px; line-height: 1.67; }
.p-dg-hero__chara {
	position: absolute;
	top: -6px; right: 16px;
	width: 72px; height: auto;
}
.p-dg-hero__chara.is-pair { width: 110px; }
/* 幅に余裕がある端末ではリードを1行で見せる（306pxのままやと縮こまる） */
@media (min-width: 600px) {
	.p-dg-hero__lead { max-width: none; }
}

/* 質問セクション */
.p-dg { padding-top: 24px; padding-bottom: 40px; }
.p-dg__question,
.p-dg__result { display: flex; flex-direction: column; gap: 16px; }

.p-dg__progress { display: flex; flex-direction: column; gap: 8px; }
.p-dg__progress-row { display: flex; align-items: center; justify-content: space-between; }
.p-dg__progress-no { color: var(--c-green); font-size: 14px; font-weight: 700; line-height: 1.43; }
.p-dg__progress-count { color: var(--c-soft); font-size: 14px; line-height: 1.43; }
.p-dg__bar {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: var(--c-line);
	overflow: hidden;
}
.p-dg__bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--c-green); transition: width .3s; }

.p-dg__card-group { display: flex; flex-direction: column; gap: 10px; }
.p-dg__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-line);
	border-radius: var(--r-card);
}
.p-dg__q { font-size: 22px; font-weight: 700; line-height: 1.55; }
.p-dg__note { color: var(--c-soft); font-size: 14px; line-height: 1.57; }
.p-dg__hint { color: var(--c-soft); font-size: 14px; line-height: 1.57; }

/* 選択肢＝フル幅のラジオ行（チップではない） */
.p-dg__options { display: flex; flex-direction: column; gap: 12px; }
.p-dg__option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px 18px;
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-line);
	border-radius: var(--r-card);
	color: var(--c-ink);
	font-size: 16px;
	line-height: 1.63;
	text-align: left;
	cursor: pointer;
}
.p-dg__option:hover { border-color: var(--c-green); }
.p-dg__radio {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	border: var(--bw-btn) solid var(--c-green);
	border-radius: 50%;
	background: var(--c-white);
}
.p-dg__option.is-active {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-white);
	font-weight: 700;
}
.p-dg__option.is-active .p-dg__radio { border-color: var(--c-white); }
.p-dg__option.is-active .p-dg__radio::before {
	content: "";
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--c-green);
}
.p-dg__btn-row { padding-top: 8px; text-align: center; }
.p-dg__back { min-width: 180px; }

/* 結果 */
.p-dg__result { gap: 24px; }
.p-dg__result-main { display: flex; flex-direction: column; gap: 16px; }
.p-dg__result-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	background: var(--c-white);
	border: var(--bw-btn) solid var(--c-green);
	border-radius: var(--r-card);
}
.p-dg__result-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.p-dg__badge {
	padding: 4px 12px;
	border-radius: 14px;
	background: var(--c-palelime);
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.72;
}
.p-dg__result-name { font-size: 26px; font-weight: 700; line-height: 1.46; }
.p-dg__result-desc { font-size: 16px; line-height: 1.75; }
.p-dg__divider { display: block; height: 1px; background: var(--c-line); }
.p-dg__price-group { display: flex; flex-direction: column; gap: 6px; }
.p-dg__price-row { display: flex; align-items: baseline; justify-content: space-between; }
.p-dg__price-label { font-size: 18px; font-weight: 700; line-height: 1.72; }
.p-dg__price { color: var(--c-green); font-size: 26px; font-weight: 700; line-height: 1.38; }
.p-dg__time { color: var(--c-soft); font-size: 16px; line-height: 1.75; }
.p-dg__cta { width: 100%; }

.p-dg__recap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background: var(--c-white);
	border-radius: 12px;
}
.p-dg__recap-title { font-size: 14px; font-weight: 700; line-height: 1.57; }
.p-dg__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-dg__chip {
	padding: 6px 14px;
	border: var(--bw-btn) solid var(--c-line);
	border-radius: 999px;
	background: var(--c-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.57;
}
.p-dg__sub { display: flex; flex-direction: column; gap: 12px; padding: 0 20px; }

/* 結果画面の店舗検索プレート。
   診断の760pxカラム内で l-container が入れ子になるため、左右paddingとmax-widthを
   打ち消して幅いっぱいに使う（打ち消さないとPCで select420+btn260 が収まらず溢れる）。 */
.p-dg__shop-search > .l-container { max-width: none; padding-inline: 0; }
.p-dg__shop-search .p-shop-search { max-width: none; }

@media (min-width: 900px) {
	/* PCカンプは無いので、内容を760px幅に中央寄せする（他ページの--w-narrowと同じ扱い） */
	.p-dg-hero__inner,
	.p-dg > .l-container { max-width: var(--w-narrow); margin-inline: auto; }
	.p-dg-hero { padding: 40px 0 16px; }
	.p-dg-hero__title { font-size: 32px; }
	/* PCはマスコットがH1の右に居るので、リードは幅を絞らず1行で見せる。 */
	.p-dg-hero__lead { max-width: none; font-size: 20px; }
	.p-dg-hero__chara { right: 0; width: 120px; }
	.p-dg-hero__chara.is-pair { width: 170px; top: -8px; }
	.p-dg__card { padding: 32px; }
	.p-dg__q { font-size: 24px; }
	.p-dg__option { font-size: 18px; padding: 18px 20px; }
	.p-dg__result-card { padding: 32px; }
	.p-dg__result-name { font-size: 32px; }
	.p-dg__result-desc,
	.p-dg__time { font-size: 18px; }
	.p-dg__price { font-size: 32px; }
	.p-dg__cta { width: auto; min-width: 320px; }
	.p-dg__btn-row { text-align: center; }
	.p-dg__sub { flex-direction: row; justify-content: center; padding: 0; }
	.p-dg__sub .c-btn { min-width: 300px; }
	.p-dg__shop-search .p-shop-search { padding: 32px 24px; }
	.p-dg__shop-search .p-shop-search__select { flex: 1 1 auto; width: auto; min-width: 0; }
	.p-dg__shop-search .p-shop-search .c-btn { flex: none; width: 240px; }
}

/* ============================================================
   41. 現在地から近い店舗を探す（導線＋/shops/nearby）
   ------------------------------------------------------------
   カンプ SECTION「近くの店舗を探す」3810:53
   SP-NEARBY 3836:43 / PC-NEARBY 3836:263

   ⭐既存の .p-shop-search / .p-shopcard には手を入れず、修飾子と追加要素だけで組む。
     導線は9テンプレート（トップ・メニュー・はじめての方・ご利用の流れ・オンライン受付・
     グレードアップ・おうちケア）に同じ部品で乗るので、既存の見た目が動くと影響範囲が広い。
   ============================================================ */

/* --- 「または」の区切り線 ------------------------------------ */
.p-shop-search__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--c-soft);
	font-size: var(--fs-small);
	font-weight: 700;
}
.p-shop-search__or::before,
.p-shop-search__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--c-line);
}

/* --- 現在地ボタン（マップピン付き） --------------------------- */
/* ⚠ピンはシルエットが細いので、.c-btn 既定の .4em では離れて見える。文字との間隔を詰める。 */
.c-btn--geo { gap: .3em; }
.c-btn--geo svg { flex: none; width: 22px; height: 22px; }

/* --- ボタン下の注意書き（2点だけの箇条書き） ------------------ */
/* ⭐年配層向けなので「許可ダイアログが出ること」を押す前に予告する。ここを省くと離脱する。 */
.p-geo-note {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-soft);
	font-size: var(--fs-small);
	line-height: 1.75;
}
.p-geo-note li { position: relative; padding-left: 16px; }
.p-geo-note li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-lime);
}
.p-geo-note strong { color: var(--c-ink); }

/* --- 導線：プレート内の現在地ブロック ------------------------- */
.p-geo-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 8px;
}
.p-geo-block__btnwrap { display: flex; flex-direction: column; gap: 12px; }
/* ブロック内のボタンは btnwrap の gap で間隔を取るので、.p-shop-search .c-btn の上余白を消す */
.p-shop-search .p-geo-block .c-btn { margin-top: 0; }

/* /shops/nearby の「別の方法で探す」では、再取得ボタンと都道府県の間の区切りに使う */
.p-shop-search--geo #geo-retry-wrap .p-shop-search__or { margin: 16px 0; }

@media (min-width: 900px) {
	.c-btn--geo svg { width: 24px; height: 24px; }

	/*
	 * ⚠PCの .p-shop-search は「横1列のflex」だが、現在地ブロックを足すと2段になる。
	 *   flex-wrap で落とす手を最初に試したら、1段目が先に折り返して縦積みになった。
	 *   ＝プレート自体は block に戻し、1段目だけを __controls で flex にする。
	 *
	 *   ⚠折り返した理由（実測）＝1段目は select 420 ＋ gap 24 ＋ ボタン 260 で **704px** 要るのに、
	 *   プレートの内寸は **698px** しかない（760 − padding 28×2 − border 3×2）。
	 *   つまり `flex-wrap: nowrap` の既存レイアウトは元から6pxはみ出していて、
	 *   justify-content:center なので左右に3pxずつ均等にこぼれている。
	 *   見た目に出ない（padding 28pxのうち3pxを食うだけ）ので既存の挙動には手を入れない。
	 *   ここで wrap を許すと、その6pxが折り返しとして表に出てしまう。
	 */
	.p-shop-search--geo { display: block; }
	.p-shop-search--geo .p-shop-search__controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24px;
	}
	.p-shop-search--geo .p-shop-search__select { flex: none; width: 420px; }
	.p-shop-search--geo .c-btn { margin-top: 0; }
	.p-shop-search--geo .p-shop-search__controls .c-btn { flex: none; width: 260px; min-height: 63px; }

	/*
	 * 現在地ボタン（導線・再取得のどちらも）は520px幅で中央。
	 * ⚠`display: flex` が必須。`.c-btn` の既定は inline-flex で、
	 *   インラインレベルのボックスには `margin-inline: auto` が効かない
	 *   ＝幅520pxのまま左に寄る（2026-09-01 に中村さん指摘で発覚）。
	 *   ブロックレベルにして初めて auto マージンが中央寄せとして働く。
	 */
	.p-shop-search--geo .c-btn--geo {
		display: flex;
		width: 520px;
		max-width: 100%;
		margin-inline: auto;
		min-height: 63px;
	}
	.p-shop-search--geo .p-geo-block { padding-top: 20px; align-items: center; }
	.p-shop-search--geo .p-geo-block .p-shop-search__or { width: 100%; }
	.p-shop-search--geo .p-geo-block__btnwrap { width: 520px; max-width: 100%; }
	.p-shop-search--geo .p-geo-block .c-btn { width: 100%; }
}

/* --- 取得中 --------------------------------------------------- */
.p-geo-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 0;
	text-align: center;
}
.p-geo-status__label { font-size: var(--fs-lead); font-weight: 700; margin: 0; }
.p-geo-status__sub { color: var(--c-soft); margin: 0; }
.p-geo-spin {
	width: 28px; height: 28px;
	border: 4px solid var(--c-line);
	border-top-color: var(--c-green);
	border-radius: 50%;
	animation: geospin .8s linear infinite;
}
@keyframes geospin { to { transform: rotate(360deg); } }
/* 動きに弱い人には回さない（止まったリングだけ見せる） */
@media (prefers-reduced-motion: reduce) {
	.p-geo-spin { animation: none; }
}

/* --- お知らせ枠（取得できなかったとき・圏内0件） -------------- */
.p-geo-alert {
	padding: 16px 18px;
	background: var(--c-cream);
	border: var(--bw-btn) solid var(--c-amber);
	border-radius: 12px;
	line-height: 1.75;
}
.p-geo-alert__title { font-size: var(--fs-lead); font-weight: 700; margin: 0 0 4px; }
.p-geo-alert p { margin: 0; }

/* --- 許可のしかたの案内（ブロック済みのときだけ出る） -------- */
/* 本文からひと区切り付ける。枠の中で「読むもの」が2つあることを見た目で分ける。 */
.p-geo-howto {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--c-amber);
}
.p-geo-howto__lead { font-weight: 700; margin: 0 0 6px; }
.p-geo-howto__steps {
	margin: 0;
	padding-left: 1.4em;
	list-style: decimal;
}
/* ⭐hidden の項目は display:none なので番号にも数えられない＝常に 1. 2. になる */
.p-geo-howto__steps li + li { margin-top: 4px; }
.p-geo-howto__steps strong { font-weight: 700; }

/* --- 結果カードの距離バッジ ----------------------------------- */
/* ⚠既存の店舗カード（一覧・都道府県別）は __body を持たないので影響しない。 */
.p-shopcard__body { flex: 1 1 auto; min-width: 0; }
.p-shopcard__body .p-shopcard__name { display: block; }
.p-shopdist {
	display: inline-flex;
	align-items: center;
	margin-top: 2px;
	padding: 2px 10px;
	background: var(--c-palelime);
	border-radius: 999px;
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 700;
}