/* ==================================================================
 * 固定ページ（AIスマート予約について / お問い合わせ）とフォーム
 * ============================================================== */

/* ---------- 読者ターゲットのラベル ---------- */

/* ヒーローのラベルと同じ役割。明るい背景に載るので配色を変える */
.aiy-page-badge {
	display: inline-block;
	width: auto;
	padding: 6px 15px;
	border-radius: 999px;
	background: rgba(26, 108, 122, 0.10);
	box-shadow: inset 0 0 0 1px rgba(26, 108, 122, 0.28);
	color: #14555f;
	font-size: 12.5px !important;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

/* ---------- ボタン ---------- */

/*
 * ヘッダー・ヒーロー・フッターをピル型に揃えたので、本文中のボタンも合わせる。
 * ブロックエディタが border-radius をインラインで書き出すため !important が要る。
 */
.wp-block-button__link {
	border-radius: 999px !important;
	padding: 13px 28px;
	font-weight: 700;
	transition: transform 0.16s ease, box-shadow 0.16s ease,
		background-color 0.16s ease;
}

/*
 * 枠線スタイルのボタン。テーマ側で背景が白のままになり、白文字と重なって
 * 読めなくなっていたので、透明＋現在の文字色の枠に戻す。
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	border: 2px solid currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.14) !important;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.wp-block-button__link:active {
	transform: translateY(1px) scale(0.98);
}

/* ---------- お問い合わせフォーム ---------- */

/*
 * 地の上に直置きだったので、記事一覧のカードと同じ体裁の面に載せる。
 *
 * SureForms は余白と角丸を「個別プロパティ＋CSS変数」で当てており、
 * padding / border-radius の一括指定では上書きできない。さらに同じ変数を
 * フォームごとのインラインCSSで後から定義し直すため、読み込み順でも負ける。
 * 変数側を !important で指定する。
 */
.srfm-form-container {
	--srfm-form-padding-top: 32px !important;
	--srfm-form-padding-bottom: 32px !important;
	--srfm-form-padding-left: 32px !important;
	--srfm-form-padding-right: 32px !important;
	--srfm-form-border-radius-top: 12px !important;
	--srfm-form-border-radius-bottom: 12px !important;
	--srfm-form-border-radius-left: 12px !important;
	--srfm-form-border-radius-right: 12px !important;
	--srfm-label-font-size: 15px !important;
	--srfm-label-font-weight: 700 !important;
	border: 1px solid #e3eaef;
	background: #ffffff;
}

.srfm-form-container .srfm-block .srfm-block-label {
	display: block;
	margin-bottom: 8px;
	color: #14303d;
}

/*
 * 必須の印は「 *」だけで、何が必須か分かりにくかった。
 * 読み上げには元から aria-hidden が付いているので、見た目だけ差し替える。
 */
.srfm-block-label .srfm-required {
	font-size: 0;
	margin-left: 8px;
	vertical-align: 2px;
}

.srfm-block-label .srfm-required::after {
	content: "必須";
	padding: 3px 8px;
	border-radius: 999px;
	background: #fdecec;
	color: #a3272b;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.srfm-input-common {
	min-height: 48px !important;
	border: 1px solid #d7e0e6 !important;
	border-radius: 10px !important;
	font-size: 16px !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.srfm-input-common:focus,
.srfm-input-common:focus-visible {
	outline: 2px solid #1a6c7a;
	outline-offset: 1px;
	border-color: transparent !important;
}

textarea.srfm-input-common {
	min-height: 160px !important;
	padding-top: 12px !important;
	line-height: 1.9;
}

/* 送信ボタンもサイト全体のピルに揃える */
.srfm-button {
	border-radius: 999px !important;
	padding: 13px 32px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	transition: transform 0.16s ease, box-shadow 0.16s ease,
		background-color 0.16s ease;
}

.srfm-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(26, 108, 122, 0.3);
}

.srfm-button:active {
	transform: translateY(1px) scale(0.98);
}

/* エラー文は赤系だが、テーマ既定は白地に対して薄い。読める濃さにする */
.srfm-error-message,
.srfm-error-content {
	color: #a3272b;
	font-size: 13.5px;
}

@media (max-width: 600px) {
	.srfm-form-container {
		--srfm-form-padding-top: 22px !important;
		--srfm-form-padding-bottom: 22px !important;
		--srfm-form-padding-left: 18px !important;
		--srfm-form-padding-right: 18px !important;
	}
}

/* ==================================================================
 * AIスマート予約について（広告LPの内容を反映したセクション）
 * ============================================================== */

/* ---------- 目次 ---------- */

.aiy-toc-title {
	color: #14303d;
}

.aiy-toc-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: aiy-toc;
}

.aiy-toc-list li {
	margin: 0;
	counter-increment: aiy-toc;
	font-size: 15px;
	line-height: 1.6;
}

.aiy-toc-list li::before {
	content: counter(aiy-toc, decimal-leading-zero);
	margin-right: 9px;
	color: #1a6c7a;
	font-size: 12px;
	font-weight: 700;
}

.aiy-toc-list a {
	color: #14303d;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.aiy-toc-list a:hover,
.aiy-toc-list a:focus-visible {
	color: #1a6c7a;
	border-bottom-color: #1a6c7a;
}

/* 目次から飛んだとき、追従ヘッダーの下に見出しが隠れないようにする */
.entry-content [id] {
	scroll-margin-top: 88px;
}

/* ---------- お悩み ---------- */

.aiy-problem {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.aiy-problem li {
	position: relative;
	margin-bottom: 12px;
	padding: 14px 18px 14px 46px;
	border-radius: 10px;
	background: #f8f9fb;
}

.aiy-problem li::before {
	content: "？";
	position: absolute;
	left: 18px;
	top: 14px;
	color: #c2410c;
	font-weight: 700;
}

/* ---------- 選ばれる3つの理由 ---------- */

.aiy-reason-no {
	color: #1a6c7a;
	letter-spacing: 0.1em;
}

/* ---------- 画面キャプチャ ---------- */

.aiy-shot img,
.aiy-shot-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.aiy-shot img {
	box-shadow: 0 10px 30px rgba(15, 27, 45, 0.12);
}

/* 店舗LPの例。実機の画面に見えるよう細い枠を付ける */
.aiy-shot-card img {
	border: 1px solid #e3eaef;
	box-shadow: 0 6px 18px rgba(15, 27, 45, 0.08);
}

.aiy-shot figcaption,
.aiy-shot-card figcaption {
	margin-top: 10px;
	color: #636e7c;
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

/* 4枚並びはスマホでは2枚ずつに */
@media (max-width: 781px) {
	.aiy-shots {
		flex-wrap: wrap !important;
	}

	.aiy-shots > .wp-block-column {
		flex-basis: calc(50% - 8px) !important;
	}
}

/* ---------- 料金 ---------- */

.aiy-price-amount {
	color: #14303d;
}

.aiy-price-list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.aiy-price-list li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 28px;
}

.aiy-price-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 11px;
	height: 6px;
	border-left: 2px solid #1a6c7a;
	border-bottom: 2px solid #1a6c7a;
	transform: rotate(-45deg);
}

/* ---------- ページ内に直接置いたFAQ ---------- */

/* 記事末尾に追記する版と違い、上の区切り線は要らない */
.aiy-faq-inline {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

/* ---------- 箇条書きの間隔（個別調整）---------- */

/* 目次は grid の gap で間隔を取っているので、行の余白は要らない */
.entry-content .aiy-toc-list li {
	margin-bottom: 0;
}

/*
 * 「主な機能」は1項目が3〜5行に折り返す。行間1.9のままだと1項目が
 * 間延びして、項目の区切りが読み取れなかった。行間を詰めて項目間をあける。
 */
/*
 * 行間は typography.css が li に直接当てている（詳細度 0,1,1）ため、
 * ul 側に書いても継承で負ける。li を直接指定する。
 * 項目内の行間より項目間を広くしないと、切れ目が読み取れない。
 */
.entry-content .aiy-feature-list li {
	line-height: 1.75;
	margin-bottom: 14px;
}

.entry-content .aiy-usecase-list li {
	line-height: 1.8;
	margin-bottom: 12px;
}