/* ===========================================================
   Object / Component / Block Styles
   下層ページ用ブロックスタイル（parts-spec-final.md P-01〜P-10）
   ・WordPress標準ブロックに register_block_style() で登録した
     is-style-XXX を実装する。
   ・編集画面側は editor-style.css 経由で同じ定義を反映する。
   =========================================================== */

/* ===========================================================
   P-01 大見出し is-style-section
   core/heading h2
   ・PC 32px / SP 24px、Bold、navy-500
   ・左右に navy-500 の「…」装飾（左寄せのまま、ドット込みのまとまり）
   ・縦リズム（前後マージン）は本文ラッパー側（layout/_page.css）と
     editor-style.css に集約。ここでは見た目だけを定義する。
   =========================================================== */

.is-style-section {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-navy-500);
	font-size: 24px;
	font-weight: 700;
	line-height: var(--lh-tight);
	text-align: left;
}

.is-style-section::before,
.is-style-section::after {
	content: "…";
	color: var(--color-navy-500);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.is-style-section {
		font-size: 32px;
		gap: 16px;
	}
}

/* ===========================================================
   P-02 中見出し is-style-subsection
   core/heading h3
   ・PC 24px / SP 22px、Bold、navy-500
   ・左に縦線（navy-500、約4px、文字高）、テキストとの間隔8px
   ・縦リズム（前後マージン）は本文ラッパー側（layout/_page.css）と
     editor-style.css に集約。ここでは見た目だけを定義する。
   =========================================================== */

.is-style-subsection {
	padding-left: 12px;
	border-left: 4px solid var(--color-navy-500);
	color: var(--color-navy-500);
	font-size: 22px;
	font-weight: 700;
	line-height: var(--lh-tight);
	text-align: left;
}

@media (min-width: 768px) {
	.is-style-subsection {
		font-size: 24px;
	}
}

/* ===========================================================
   P-05 注釈・キャプション is-style-caption
   core/paragraph
   ・PC/SP 14px、gray-600
   =========================================================== */

.is-style-caption {
	color: var(--color-gray-600);
	font-size: 14px;
	line-height: var(--lh-base);
}

/* ===========================================================
   P-06 チェックリスト is-style-check
   core/list
   ・行頭ピンク中黒「・」（pink-500）
   ・PC/SP 16px、1カラム、項目間6px、行間1.7
   =========================================================== */

.is-style-check {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-size: 16px;
	line-height: var(--lh-base);
}

.is-style-check li {
	position: relative;
	padding-left: 1.4em;
}

.is-style-check li + li {
	margin-top: 6px;
}

.is-style-check li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-pink-500);
	font-weight: 700;
	line-height: inherit;
}

/* ネストしたリストはカウンタ/装飾を引き継がない */
.is-style-check ul,
.is-style-check ol {
	margin-top: 6px;
}

/* ===========================================================
   P-06b 番号付きチェックリスト is-style-check-number
   core/list（編集者がツールバーで「番号付きリスト」=<ol>に切替えて使う）
   ・数字部分（::marker）のみ pink-500、テキストは通常色
   ・リズム（font-size 16px / 行間 1.7 / 項目間 6px）は is-style-check と揃える
   ・<ul> のままだと数字は出ない（通常の・になる）— 利用時は <ol> 必須
   =========================================================== */

.is-style-check-number {
	list-style: decimal;
	padding-left: 1.5em;
	margin: 0;
	font-size: 16px;
	line-height: var(--lh-base);
}

.is-style-check-number > li {
	padding-left: 0.25em;
}

.is-style-check-number > li + li {
	margin-top: 6px;
}

.is-style-check-number > li::marker {
	color: var(--color-pink-500);
	font-weight: 600;
}

/* ===========================================================
   P-07 目次アンカーリスト is-style-anchor
   core/list
   ・行頭ピンク「›」（icon-arrow-right-pink.svg）
   ・PC 2カラム / SP 1カラム、区切り線なし、枠なし
   =========================================================== */

.is-style-anchor {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-size: 16px;
	line-height: var(--lh-base);
}

.is-style-anchor li {
	position: relative;
	padding-left: 24px;
}

.is-style-anchor li + li {
	margin-top: 8px;
}

.is-style-anchor li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 16px;
	height: 16px;
	background: url("../../../images/svg/icon-arrow-right-pink.svg") no-repeat center / contain;
}

.is-style-anchor a {
	color: var(--color-link);
	text-decoration: none;
}

@media (hover: hover) and (min-width: 768px) {
	.is-style-anchor a:hover {
		color: var(--color-link-hover);
		text-decoration: underline;
	}
}

@media (min-width: 768px) {
	.is-style-anchor {
		column-count: 2;
		column-gap: 40px;
	}

	.is-style-anchor li {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* ===========================================================
   P-08 枠囲みボックス（4バリエーション）
   core/group
   ・角丸 16px、padding PC24 / SP左右16・上下24 は全種共通
   ・色違いで4スタイル:
       is-style-bordered         : 白          + navy-300 枠
       is-style-bordered-yellow  : yellow-50   + yellow-300 枠
       is-style-bordered-pink    : pink-200    + pink-500 枠
       is-style-bordered-navy    : navy-200    + navy-400 枠
   =========================================================== */

.wp-block-group.is-style-bordered {
	background-color: var(--color-white);
	border: 1px solid var(--color-navy-300);
	border-radius: var(--radius-lg);
	padding: 24px 16px;
}

.wp-block-group.is-style-bordered-yellow {
	background-color: var(--color-yellow-50);
	border: 1px solid var(--color-yellow-300);
	border-radius: var(--radius-lg);
	padding: 24px 16px;
}

/* 黄色枠囲み（狭い・中央寄せ） yellow と同色で、
   ・PC: max-width 720px + 中央寄せ（特別お知らせ用）
   ・中身（テキスト・画像・ボタン等）も中央寄せ */
.wp-block-group.is-style-bordered-yellow-narrow {
	background-color: var(--color-yellow-50);
	border: 1px solid var(--color-yellow-300);
	border-radius: var(--radius-lg);
	padding: 24px 16px;
	text-align: center;
}

.wp-block-group.is-style-bordered-pink {
	background-color: var(--color-pink-200);
	border: 1px solid var(--color-pink-500);
	border-radius: var(--radius-lg);
	padding: 24px 16px;
}

.wp-block-group.is-style-bordered-navy {
	background-color: var(--color-navy-200);
	border: 1px solid var(--color-navy-400);
	border-radius: var(--radius-lg);
	padding: 24px 16px;
}

@media (min-width: 768px) {
	.wp-block-group.is-style-bordered,
	.wp-block-group.is-style-bordered-yellow,
	.wp-block-group.is-style-bordered-yellow-narrow,
	.wp-block-group.is-style-bordered-pink,
	.wp-block-group.is-style-bordered-navy {
		padding: 24px;
	}

	/* yellow と yellow-narrow: PC 時に最大幅 720px・中央寄せ
	   （特別なお知らせ用枠は本文全幅 1280px だと広すぎるため）
	   ・margin-top は _page.css の縦リズムに任せたいので
	     ここでは margin-left / margin-right だけ auto にする
	   ・他色（pink / navy）には付けない（ユーザー指示） */
	.wp-block-group.is-style-bordered-yellow,
	.wp-block-group.is-style-bordered-yellow-narrow {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* yellow-narrow の中身ブロック単位の中央寄せ
   ・text-align: center は親で指定済み（インライン要素はそれで中央寄せ）
   ・block 単位（画像・ボタン・横並び等）はここで個別に対応
   ・descendant セレクタを使うので __inner-container を貫通してマッチする */
.wp-block-group.is-style-bordered-yellow-narrow .wp-block-image,
.wp-block-group.is-style-bordered-yellow-narrow .wp-block-buttons,
.wp-block-group.is-style-bordered-yellow-narrow .wp-block-button {
	margin-left: auto;
	margin-right: auto;
}

/* 横並び（Row / Stack 等、layout:flex の core/group）は justify で中央 */
.wp-block-group.is-style-bordered-yellow-narrow .wp-block-group.is-layout-flex {
	justify-content: center;
}

/* yellow-narrow 内の【横並び flex グループ内】の wp-block-image は
   margin: 0 にする（auto 中央寄せを打ち消す）。
   --------------------------------------------------------------
   背景:
     ・上のルール（287-292 行）で is-style-bordered-yellow-narrow 内の
       .wp-block-image に margin-left/right: auto を入れている。
       通常フローでは画像を中央寄せできて便利だが、flex コンテナの中の
       flex item に auto マージンが付くと、各 item が「auto マージン」で
       残余スペースを吸収してしまい、ボタン同士が左右端まで広がる事故が起きる
       （デジスマ枠で App Store / Google Play ボタンが両端に離れる現象）。
     ・/first/ では編集者がブロックエディタで各図形に
       custom CSS "margin: 0 !important" を付けて回避していたが、
       /online/（wp_insert_post で投入）はその custom CSS が生成されないため
       /first/ と同じ見栄えにならなかった。
   解決:
     ・テーマCSS側で「yellow-narrow 内の flex グループの中にある画像」は
       margin: 0 にし、justify-content: center による中央近接配置が
       効くようにする。
     ・通常フロー（flex 外）の画像は従来どおり margin: auto で中央寄せ。
     ・/first/ の per-block CSS "margin: 0 !important" は残るが、結果は同じ
       （重複でも害なし。/first/ 側の見た目は1pxも変わらない）。
     ・子孫セレクタなので __inner-container を貫通してマッチする。
       詳細度 0,4,0 で上の auto-margin ルール（0,2,0）に勝つ。!important 不使用。 */
.wp-block-group.is-style-bordered-yellow-narrow .wp-block-group.is-layout-flex .wp-block-image {
	margin-left: 0;
	margin-right: 0;
}

/* ===========================================================
   P-09 ボタン
   core/button: is-style-primary-pink / is-style-primary-navy / is-style-secondary
   ・既存 .c-button の見た目を WordPress ボタンブロックにも適用する。
     完全角丸（pill）、右に矢印アイコン、サイズは PC 288×64 / SP 288×56。
   =========================================================== */

/* 共通：core/button のラッパー */
.wp-block-button.is-style-primary-pink,
.wp-block-button.is-style-primary-navy,
.wp-block-button.is-style-secondary {
	font-family: var(--font-base);
}

/* 共通：リンク本体（.c-button 相当の形状） */
.wp-block-button.is-style-primary-pink > .wp-block-button__link,
.wp-block-button.is-style-primary-navy > .wp-block-button__link,
.wp-block-button.is-style-secondary > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 288px;
	max-width: 100%;
	height: 56px;
	padding: 0 48px 0 32px;
	border-radius: var(--radius-full);
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	background-image: url("../../../images/svg/icon-arrow-right.svg");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 18px 18px;
	transition: var(--transition-base);
}

@media (min-width: 768px) {
	.wp-block-button.is-style-primary-pink > .wp-block-button__link,
	.wp-block-button.is-style-primary-navy > .wp-block-button__link,
	.wp-block-button.is-style-secondary > .wp-block-button__link {
		height: 64px;
	}
}

/* --- ピンク塗り --- */
.wp-block-button.is-style-primary-pink > .wp-block-button__link {
	background-color: var(--color-pink-500);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
}

@media (hover: hover) and (min-width: 768px) {
	.wp-block-button.is-style-primary-pink > .wp-block-button__link:hover {
		background-color: var(--color-pink-600);
		color: var(--color-white);
		box-shadow: var(--shadow-md);
	}

	.wp-block-button.is-style-primary-pink > .wp-block-button__link:active {
		background-color: var(--color-pink-700);
		transform: translateY(1px);
		box-shadow: var(--shadow-sm);
	}
}

/* --- ネイビー塗り --- */
.wp-block-button.is-style-primary-navy > .wp-block-button__link {
	background-color: var(--color-navy-500);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
}

@media (hover: hover) and (min-width: 768px) {
	.wp-block-button.is-style-primary-navy > .wp-block-button__link:hover {
		background-color: var(--color-navy-600);
		color: var(--color-white);
		box-shadow: var(--shadow-md);
	}

	.wp-block-button.is-style-primary-navy > .wp-block-button__link:active {
		background-color: var(--color-navy-700);
		transform: translateY(1px);
		box-shadow: var(--shadow-sm);
	}
}

/* --- セカンダリ（白＋ネイビー枠線） --- */
.wp-block-button.is-style-secondary > .wp-block-button__link {
	background-color: var(--color-white);
	color: var(--color-navy-500);
	border: 1px solid var(--color-navy-500);
	background-image: url("../../../images/svg/icon-arrow-right-navy.svg");
}

@media (hover: hover) and (min-width: 768px) {
	.wp-block-button.is-style-secondary > .wp-block-button__link:hover {
		background-color: var(--color-navy-100);
		color: var(--color-navy-500);
	}

	.wp-block-button.is-style-secondary > .wp-block-button__link:active {
		background-color: var(--color-navy-200);
		transform: translateY(1px);
	}
}

/* ===========================================================
   P-10 料金表 is-style-clinic
   core/table
   ・ヘッダー行なし、行間に点線下線（gray-500）、ストライプなし
   ・PC 16px / SP 15px、金額列（最終列）は右寄せ＋16px固定
   ・SPでも2列維持（横スクロールしない）
   =========================================================== */

.wp-block-table.is-style-clinic {
	margin: 0;
}

.wp-block-table.is-style-clinic table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	table-layout: fixed;
	font-size: 15px;
	line-height: var(--lh-base);
}

@media (min-width: 768px) {
	.wp-block-table.is-style-clinic table {
		font-size: 16px;
	}
}

.wp-block-table.is-style-clinic th,
.wp-block-table.is-style-clinic td {
	padding: 12px 8px;
	border: 0;
	border-bottom: 1px dashed var(--color-gray-500);
	background: transparent;
	vertical-align: middle;
	text-align: left;
	color: var(--color-text);
	font-weight: 400;
}

/* 最終列＝金額列：右寄せ／SPでもフォントサイズを下げない */
.wp-block-table.is-style-clinic th:last-child,
.wp-block-table.is-style-clinic td:last-child {
	text-align: right;
	font-size: 16px;
	white-space: nowrap;
}

/* 横スクロール無効化：figure ラッパーがはみ出さないように */
.wp-block-table.is-style-clinic {
	overflow: visible;
}