@charset "UTF-8";
/*
 * 「社長の補助金コンシェルジュ」LP 用スタイル。
 *
 * 複製元 https://lp.knowledge-link.net/ の styles.css を Next.js 版（ao-tax-hp）
 * 経由で移植したもの。既存サイトへ影響しないよう .hojokin-lp 配下にスコープしている。
 *
 * Next.js 版から変えた点は 3 つ。いずれも公開後の実測で見つかった欠陥への対応。
 *   1. 中間 CTA のタップ判定を画像上のボタン実寸に合わせた（下端 3 割が無反応だった）
 *   2. 相談フォームが画面内にある間は固定 CTA を隠す（送信ボタンを覆っていた）
 *   3. 360px 以下で入力欄が 11px になり iOS Safari がフォーカス時に自動ズームしていたのを
 *      16px のままにした。欄の高さは画像幅に比例するので 360px でも 16px が収まる
 */

.hojokin-lp * {
	box-sizing: border-box;
}

.hojokin-lp {
	min-height: 100vh;
	color: #102655;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
		"Yu Gothic Medium", "Noto Sans JP", sans-serif;
	background:
		linear-gradient(
			90deg,
			rgba(12, 39, 83, 0.08),
			transparent 18%,
			transparent 82%,
			rgba(12, 39, 83, 0.08)
		),
		#e8f2fb;
}

.hojokin-lp button,
.hojokin-lp input,
.hojokin-lp textarea {
	font: inherit;
}

.hojokin-lp .lp {
	width: min(100%, 430px);
	margin: 0 auto;
	background: #f4f9ff;
	box-shadow: 0 0 42px rgba(16, 38, 85, 0.2);
	overflow: hidden;
	padding-bottom: 74px;
}

.hojokin-lp .slice {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	background: #f4f9ff;
}

.hojokin-lp .slice-hero {
	overflow: hidden;
}

.hojokin-lp .slice-proposal-band {
	background: linear-gradient(180deg, #3a7fc7 0%, #2459a8 100%);
	padding: 24px 20px;
	line-height: 1.55;
}

.hojokin-lp .slice-proposal-band p {
	margin: 0;
	color: #fff;
	font-weight: 700;
	font-size: clamp(15px, 4.5vw, 19px);
	text-align: center;
	letter-spacing: 0;
}

.hojokin-lp .slice-hero > img {
	transform: scale(1.015);
	transform-origin: center center;
}

.hojokin-lp .slice img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.hojokin-lp .hotspot {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	border: 0;
	border-radius: 999px;
	color: transparent;
	background: rgba(255, 255, 255, 0.01);
	cursor: pointer;
}

.hojokin-lp .logo-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 9.5%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	z-index: 2;
	pointer-events: none;
}

.hojokin-lp .slice img.logo-overlay {
	width: auto;
	height: 75%;
	max-width: 80%;
	display: block;
}

.hojokin-lp .hotspot:focus-visible {
	outline: 3px solid #ff7a59;
	outline-offset: 3px;
}

.hojokin-lp .contact-form {
	position: absolute;
	inset: 0;
}

.hojokin-lp .field {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	line-height: 1;
}

.hojokin-lp .field input,
.hojokin-lp .field textarea {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 4px;
	color: #0e2859;
	background: transparent;
	box-shadow: none;
	/* 16px を下回ると iOS Safari がフォーカス時にページを自動ズームする。下げない */
	font-size: 16px;
	line-height: 1.35;
	-webkit-appearance: none;
}

.hojokin-lp .field input:focus,
.hojokin-lp .field textarea:focus {
	outline: 2px solid #ff7a59;
	outline-offset: 2px;
}

.hojokin-lp .field input {
	padding: 0 8px;
}

.hojokin-lp .field textarea {
	padding: 6px 8px;
	resize: none;
}

.hojokin-lp .form-submit {
	background: rgba(16, 50, 112, 0.01);
}

.hojokin-lp .consent-checkbox {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	margin: 0;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 4px;
}

.hojokin-lp .consent-checkbox:checked {
	background-color: #ff7a59;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-size: 70% 70%;
	background-position: center;
	background-repeat: no-repeat;
}

.hojokin-lp .consent-checkbox:focus-visible {
	outline: 3px solid #ff7a59;
	outline-offset: 3px;
}

.hojokin-lp .consent-link {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	z-index: 2;
	cursor: pointer;
	text-decoration: none;
	font-size: 0;
}

.hojokin-lp .consent-link:focus-visible {
	outline: 2px solid #ff7a59;
	outline-offset: 2px;
}

.hojokin-lp .company-info {
	padding: 32px 24px 28px;
	background: #fff;
	border-top: 1px solid rgba(16, 38, 85, 0.08);
	line-height: 1.6;
}

.hojokin-lp .company-info h2 {
	margin: 0 0 18px;
	color: #102655;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.hojokin-lp .company-info h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 8px auto 0;
	background: #ffb547;
	border-radius: 2px;
}

.hojokin-lp .company-info__list {
	margin: 0;
	padding: 0;
	font-size: 13px;
}

.hojokin-lp .company-info__row {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed rgba(16, 38, 85, 0.14);
}

.hojokin-lp .company-info__row:last-child {
	border-bottom: 0;
}

.hojokin-lp .company-info__row dt {
	color: #43516b;
	font-weight: 700;
}

.hojokin-lp .company-info__row dd {
	margin: 0;
	color: #102655;
}

/*
 * 固定 CTA。送信ボタン（z-index:2）を水平方向に完全に内包するため、
 * 相談フォームが画面に入っている間は .is-hidden で隠す（JS が付け外しする）。
 * 隠すのに display:none を使うと、戻ってきたときに再描画がちらつくので
 * visibility と opacity で消す。
 */
.hojokin-lp .fixed-cta {
	position: fixed;
	z-index: 10;
	left: 50%;
	bottom: max(14px, env(safe-area-inset-bottom));
	width: min(390px, calc(100% - 32px));
	min-height: 56px;
	transform: translateX(-50%);
	border: 0;
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(180deg, #ff7a59, #ef5737);
	box-shadow: 0 14px 28px rgba(227, 75, 43, 0.32);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.hojokin-lp .fixed-cta.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.hojokin-lp .fixed-cta:focus-visible {
	outline: 3px solid #183d84;
	outline-offset: 3px;
}

.hojokin-lp .modal {
	position: fixed;
	z-index: 20;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(7, 23, 51, 0.56);
}

.hojokin-lp .modal[hidden] {
	display: none;
}

.hojokin-lp .modal-panel {
	position: relative;
	width: min(100%, 360px);
	padding: 28px 24px 24px;
	border-radius: 8px;
	color: #102655;
	background: #fff;
	box-shadow: 0 22px 52px rgba(5, 23, 57, 0.24);
}

.hojokin-lp .modal-kicker {
	margin: 0 0 8px;
	color: #ef5737;
	font-size: 13px;
	font-weight: 800;
}

.hojokin-lp .modal-panel h2 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
}

.hojokin-lp .modal-panel p {
	margin: 0 0 18px;
	color: #43516b;
	font-size: 14px;
	line-height: 1.8;
}

.hojokin-lp .modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	color: #102655;
	background: #edf3f9;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.hojokin-lp .modal-primary {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	color: #fff;
	background: #173b80;
	font-weight: 800;
	cursor: pointer;
}

.hojokin-lp .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 360px) {
	.hojokin-lp .fixed-cta {
		min-height: 52px;
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------
 * 完了ページ（/hojokin-concierge/thanks/）
 * ------------------------------------------------------------------ */

.hojokin-thanks {
	min-height: 100vh;
	background: #e8f2fb;
	color: #102655;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
		"Yu Gothic Medium", "Noto Sans JP", sans-serif;
}

.hojokin-thanks .thanks-main {
	width: min(100%, 430px);
	min-height: 100vh;
	margin: 0 auto;
	padding: 0 24px 48px;
	background: #f4f9ff;
	box-shadow: 0 0 42px rgba(16, 38, 85, 0.2);
}

.hojokin-thanks .thanks-logo-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	margin: 0 -24px 32px;
	background: #fff;
}

.hojokin-thanks .thanks-logo-bar img {
	height: 38px;
	width: auto;
}

.hojokin-thanks .thanks-card {
	padding: 32px 24px;
	border: 1px solid rgba(16, 38, 85, 0.12);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(16, 38, 85, 0.06);
	text-align: center;
}

.hojokin-thanks .thanks-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(180deg, #ff7a59, #ef5737);
	font-size: 30px;
	font-weight: 800;
}

.hojokin-thanks .thanks-card h1 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.hojokin-thanks .thanks-card p {
	margin: 0 0 12px;
	color: #43516b;
	font-size: 14px;
	line-height: 1.8;
}

.hojokin-thanks .thanks-office {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed rgba(16, 38, 85, 0.18);
	text-align: left;
	font-size: 12px;
	color: #6a7a93;
}

.hojokin-thanks .thanks-office dt {
	margin-top: 8px;
	font-weight: 700;
	color: #43516b;
}

.hojokin-thanks .thanks-office dd {
	margin: 2px 0 0;
}

.hojokin-thanks .thanks-back {
	display: inline-block;
	margin-top: 28px;
	padding: 14px 28px;
	border-radius: 999px;
	color: #fff;
	background: #173b80;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
}

.hojokin-thanks .thanks-footer {
	margin-top: 32px;
	text-align: center;
	font-size: 12px;
	color: #8997b3;
}

/* 同意バナーを出さない代わりに置いている導線。カード内の電話番号や
   「ページに戻る」より目立たせたくないので、事務所名と同じ薄さを継ぐ。
   下線だけは残す（リンクだと分からなければ導線として機能しない） */
.hojokin-thanks .thanks-privacy {
	display: block;
	margin-top: 6px;
	color: inherit;
	text-decoration: underline;
}