@charset "UTF-8";
/* ==========================================================================
   HOKKAIDO FINAL 2026 — 大会案内AI

   考え方
   ・大会ページと同じ Ink / Bone。角丸・発光・金属質は使いません。
     「上質な大会パンフレットに挟まれた案内窓口」の見え方にします。
   ・寒色（--hf-ai-cold）は罫線と要点だけ。面には広げません。
   ・セレクタはすべて .hf26-ai 配下です。他ページにも本体ボットにも出ません。
   ・動きは2つだけ（パネルの出現／考え中の点）。どちらも
     prefers-reduced-motion で止まります。

   assets/css/hokkaido-final-2026.css とは別ファイルです。
   トークンは .hf26 から継承できない位置に出るため、ここで持ちます。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. トークン
   -------------------------------------------------------------------------- */
.hf26-ai {
	--hf-ai-ink: #17181b;
	--hf-ai-ink-2: #1f2024;
	--hf-ai-bone: #f2efe7;
	--hf-ai-bone-2: #e9e5db;

	--hf-ai-text: #1a1b1e;
	--hf-ai-text-2: #4b4d52;
	--hf-ai-text-3: #63666c;

	--hf-ai-on-ink: #f2efe7;
	--hf-ai-on-ink-2: #a9a69e;

	--hf-ai-cold: #1d4f6b;
	--hf-ai-cold-ink: #8fbdd4;

	--hf-ai-rule: rgba(26, 27, 30, 0.16);
	--hf-ai-rule-2: rgba(26, 27, 30, 0.42);
	--hf-ai-rule-ink: rgba(242, 239, 231, 0.18);

	--hf-ai-jp: "Zen Kaku Gothic New", sans-serif;
	--hf-ai-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* スクロールを止めているあいだ、消えたスクロールバーぶんを埋めます。 */
	--hf-ai-sbw: 0px;

	/*
	 * 画面下部にある「他の固定要素」をよけるための高さです。
	 *
	 *   PC  … Contact Form 7 の reCAPTCHA バッジ（右下・下から約74px）
	 *   SP  … 上に加えて、大会の固定エントリーボタン（高さ約68px）
	 *
	 * 実測してから決めた値です。バッジや固定ボタンの高さが変わったら
	 * ここだけを直してください。
	 */
	--hf-ai-clear: 92px;
}

/* --------------------------------------------------------------------------
   1. サイト共通CSSの打ち消し

   Simple Custom CSS の `* { font-family: … !important }` が全ページに
   効いています（作業対象外・未変更）。`*` は詳細度 (0,0,0) なので、
   クラスを1つ含む !important で上回ります。書体の指定はこの1か所だけです。
   -------------------------------------------------------------------------- */
.hf26-ai,
.hf26-ai * {
	font-family: var(--hf-ai-jp) !important;
}

.hf26-ai *,
.hf26-ai *::before,
.hf26-ai *::after {
	box-sizing: border-box;
}

/*
 * リセットは :where() で包み、詳細度を 0 にします。
 * `.hf26-ai button` (0,1,1) のままだと、`.hf26-ai__launcher` のような
 * クラス1つの指定 (0,1,0) に勝ってしまい、地色と枠が消えます。
 */
.hf26-ai :where(button) {
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.hf26-ai :where(svg) {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: square;
}

/* --------------------------------------------------------------------------
   2. ランチャー
   -------------------------------------------------------------------------- */
.hf26-ai .hf26-ai__launcher {
	position: fixed;
	right: calc(max(20px, env(safe-area-inset-right, 0px)) + var(--hf-ai-sbw));
	bottom: calc(var(--hf-ai-clear) + env(safe-area-inset-bottom, 0px));
	z-index: 56;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	max-width: min(340px, calc(100vw - 40px));
	padding: 10px 16px;
	border: 1px solid var(--hf-ai-ink);
	box-shadow:
		0 0 0 1px rgba(242, 239, 231, 0.24),
		0 10px 26px rgba(23, 24, 27, 0.26);
	background: var(--hf-ai-ink);
	color: var(--hf-ai-on-ink);
	text-align: left;
	transition: background 0.3s var(--hf-ai-ease), color 0.3s var(--hf-ai-ease);
}

.hf26-ai .hf26-ai__launcher:hover,
.hf26-ai .hf26-ai__launcher:focus-visible {
	background: var(--hf-ai-ink-2);
}

.hf26-ai__launcher-main {
	display: block;
	min-width: 0;
}

.hf26-ai__launcher-name {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.35;
}

.hf26-ai__launcher-sub {
	display: block;
	overflow: hidden;
	margin-top: 2px;
	color: var(--hf-ai-on-ink-2);
	font-size: 10.5px;
	letter-spacing: 0.02em;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 「試験運用」— 本文の「予定」チップと同じ作りです。 */
.hf26-ai__trial {
	flex: 0 0 auto;
	padding: 1px 7px;
	border: 1px solid var(--hf-ai-rule-ink);
	color: var(--hf-ai-on-ink-2);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.hf26-ai.is-open .hf26-ai__launcher {
	display: none;
}

/* --------------------------------------------------------------------------
   3. パネル
   -------------------------------------------------------------------------- */
.hf26-ai__panel {
	position: fixed;
	right: calc(max(20px, env(safe-area-inset-right, 0px)) + var(--hf-ai-sbw));
	bottom: calc(var(--hf-ai-clear) + env(safe-area-inset-bottom, 0px));
	z-index: 88;
	display: flex;
	flex-direction: column;
	width: min(420px, calc(100vw - 40px));
	/*
	 * 開いた直後に「注記・質問例4つ・入力欄・脚注」が
	 * そのまま収まる高さです（1440×900 で実測して決めました）。
	 * 画面が低いときは vh 側が効いて、本文域だけが縮みます。
	 */
	max-height: min(700px, calc(100vh - var(--hf-ai-clear) - 32px));

	/*
	 * 縁は2本引きます。墨の地（ファーストビュー）では外側の骨色が、
	 * 骨色の地（本文）では内側の墨が輪郭になります。
	 * 1本だけだと、同じ色の地に置いたときに窓の輪郭が消えます。
	 */
	border: 1px solid var(--hf-ai-ink);
	box-shadow:
		0 0 0 1px rgba(242, 239, 231, 0.24),
		0 18px 48px rgba(23, 24, 27, 0.28);
	background: var(--hf-ai-bone);
	color: var(--hf-ai-text);
}

.hf26-ai__panel[hidden] {
	display: none;
}

.hf26-ai.is-motion .hf26-ai__panel {
	animation: hf26-ai-rise 0.34s var(--hf-ai-ease) both;
}

@keyframes hf26-ai-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

/* --- 見出し --- */
.hf26-ai__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 16px 13px;
	border-bottom: 1px solid var(--hf-ai-rule-ink);
	background: var(--hf-ai-ink);
	color: var(--hf-ai-on-ink);
}

.hf26-ai__head-series {
	margin: 0 0 4px;
	color: var(--hf-ai-on-ink-2);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
}

.hf26-ai__head-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
}

.hf26-ai .hf26-ai__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px -10px -10px 0;
	color: var(--hf-ai-on-ink-2);
	transition: color 0.25s var(--hf-ai-ease);
}

.hf26-ai .hf26-ai__close:hover,
.hf26-ai .hf26-ai__close:focus-visible {
	color: var(--hf-ai-on-ink);
}

.hf26-ai__close svg {
	width: 16px;
	height: 16px;
}

/* --- 本文 --- */
.hf26-ai__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.hf26-ai__notice {
	margin: 0;
	padding: 11px 12px;
	border-left: 2px solid var(--hf-ai-cold);
	background: var(--hf-ai-bone-2);
	color: var(--hf-ai-text-2);
	font-size: 11.5px;
	line-height: 1.75;
}

.hf26-ai__notice strong {
	display: block;
	margin-top: 3px;
	color: var(--hf-ai-text);
	font-weight: 700;
}

.hf26-ai__intro {
	margin-top: 18px;
}

.hf26-ai__intro[hidden] {
	display: none;
}

.hf26-ai__intro-lead {
	margin: 0 0 9px;
	color: var(--hf-ai-text-3);
	font-size: 11px;
	letter-spacing: 0.06em;
}

.hf26-ai__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.hf26-ai__chips button {
	/* 指で押す的は 44px 以上にします（ページ本体と同じ基準）。 */
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--hf-ai-rule);
	background: transparent;
	color: var(--hf-ai-text);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: left;
	transition: border-color 0.25s var(--hf-ai-ease), background 0.25s var(--hf-ai-ease);
}

.hf26-ai__chips button:hover:not(:disabled),
.hf26-ai__chips button:focus-visible {
	border-color: var(--hf-ai-cold);
	background: var(--hf-ai-bone-2);
}

.hf26-ai__chips button:disabled {
	color: var(--hf-ai-text-3);
	cursor: default;
}

/* --- 会話 --- */
.hf26-ai__log:not(:empty) {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hf26-ai__msg {
	display: block;
	max-width: 100%;
}

.hf26-ai__msg-role {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.hf26-ai__msg--you .hf26-ai__msg-role {
	color: var(--hf-ai-text-3);
}

.hf26-ai__msg--ai .hf26-ai__msg-role {
	color: var(--hf-ai-cold);
}

.hf26-ai__msg-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.95;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.hf26-ai__msg--you .hf26-ai__msg-text {
	padding: 10px 12px;
	background: var(--hf-ai-bone-2);
	color: var(--hf-ai-text-2);
}

.hf26-ai__msg--ai {
	padding-left: 12px;
	border-left: 2px solid var(--hf-ai-rule);
}

.hf26-ai__msg-note {
	display: block;
	margin-top: 7px;
	color: var(--hf-ai-text-3);
	font-size: 11px;
	line-height: 1.7;
}

.hf26-ai__links {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 11px;
}

.hf26-ai__links a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	padding: 10px 11px;
	border: 1px solid var(--hf-ai-rule-2);
	color: var(--hf-ai-text);
	font-size: 12px;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: border-color 0.25s var(--hf-ai-ease), color 0.25s var(--hf-ai-ease);
}

.hf26-ai__links a:hover,
.hf26-ai__links a:focus-visible {
	border-color: var(--hf-ai-cold);
	color: var(--hf-ai-cold);
}

.hf26-ai__links svg {
	width: 10px;
	height: 10px;
}

/* --- 考え中 --- */
.hf26-ai__typing {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 14px 0 0;
	color: var(--hf-ai-text-3);
	font-size: 11.5px;
	letter-spacing: 0.05em;
}

.hf26-ai__typing[hidden] {
	display: none;
}

.hf26-ai__dots {
	display: inline-flex;
	gap: 4px;
}

.hf26-ai__dots i {
	width: 4px;
	height: 4px;
	background: var(--hf-ai-cold);
}

.hf26-ai.is-motion .hf26-ai__dots i {
	animation: hf26-ai-blink 1.1s var(--hf-ai-ease) infinite;
}

.hf26-ai.is-motion .hf26-ai__dots i:nth-child(2) {
	animation-delay: 0.18s;
}

.hf26-ai.is-motion .hf26-ai__dots i:nth-child(3) {
	animation-delay: 0.36s;
}

@keyframes hf26-ai-blink {
	0%, 60%, 100% { opacity: 0.28; }
	30% { opacity: 1; }
}

/* --- 失敗したとき --- */
.hf26-ai__error {
	margin-top: 14px;
	padding: 11px 12px;
	border: 1px solid var(--hf-ai-rule-2);
	background: var(--hf-ai-bone-2);
}

.hf26-ai__error[hidden] {
	display: none;
}

.hf26-ai__error p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.8;
}

.hf26-ai__error button {
	min-height: 44px;
	margin-top: 2px;
	padding: 10px 0;
	border-bottom: 1px solid currentColor;
	color: var(--hf-ai-cold);
	font-size: 12px;
}

/* --- 入力欄 --- */
.hf26-ai__form {
	flex: 0 0 auto;
	padding: 12px 16px;
	border-top: 1px solid var(--hf-ai-rule);
	background: var(--hf-ai-bone-2);
}

.hf26-ai__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.hf26-ai__composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.hf26-ai__composer textarea {
	flex: 1 1 auto;
	min-height: 44px;
	max-height: 116px;
	padding: 11px 12px;
	border: 1px solid var(--hf-ai-rule-2);
	background: var(--hf-ai-bone);
	color: var(--hf-ai-text);
	font-size: 13.5px;
	line-height: 1.6;
	resize: none;
}

.hf26-ai__composer textarea::placeholder {
	color: var(--hf-ai-text-3);
}

.hf26-ai__composer textarea:focus-visible {
	border-color: var(--hf-ai-cold);
	outline: none;
}

.hf26-ai__composer button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 60px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--hf-ai-ink);
	background: var(--hf-ai-ink);
	color: var(--hf-ai-on-ink);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	transition: background 0.25s var(--hf-ai-ease);
}

.hf26-ai__composer button:disabled {
	border-color: var(--hf-ai-rule-2);
	background: transparent;
	color: var(--hf-ai-text-3);
	cursor: not-allowed;
}

.hf26-ai__composer button svg {
	width: 12px;
	height: 12px;
}

.hf26-ai__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 7px 0 0;
	color: var(--hf-ai-text-3);
	font-size: 10.5px;
	letter-spacing: 0.03em;
}

/* --- 脚注 --- */
.hf26-ai__foot {
	flex: 0 0 auto;
	padding: 11px 16px calc(9px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--hf-ai-rule);
	background: var(--hf-ai-bone);
}

/*
 * 連絡先と「会話を終了して消去」は、本文とは別の行に置きます。
 * 文章の中に混ぜると、リンクの高さが行の高さ（約15px）になり、
 * 指では押しにくくなるためです。
 */
.hf26-ai__foot-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
}

.hf26-ai .hf26-ai__foot-mail {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--hf-ai-cold);
	font-size: 10.5px;
	line-height: 1.6;
	overflow-wrap: anywhere;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.hf26-ai__foot p {
	margin: 0;
	color: var(--hf-ai-text-3);
	font-size: 10.5px;
	line-height: 1.75;
}

/* データの扱い — 既定は閉じたまま1行 */
.hf26-ai__disclosure {
	margin-top: 5px;
}

.hf26-ai .hf26-ai__disclosure > summary {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	color: var(--hf-ai-cold);
	cursor: pointer;
	font-size: 10.5px;
	letter-spacing: 0.03em;
	list-style: none;
}

.hf26-ai .hf26-ai__disclosure > summary::-webkit-details-marker {
	display: none;
}

.hf26-ai .hf26-ai__disclosure > summary::after {
	content: "＋";
	margin-left: 5px;
	font-size: 9px;
}

.hf26-ai .hf26-ai__disclosure[open] > summary::after {
	content: "−";
}

.hf26-ai__disclosure > p {
	margin-top: 2px;
	padding: 8px 10px;
	background: var(--hf-ai-bone-2);
}

.hf26-ai__foot a {
	color: var(--hf-ai-cold);
	overflow-wrap: anywhere;
}

.hf26-ai__foot button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-bottom: 1px solid currentColor;
	color: var(--hf-ai-text-3);
	font-size: 10.5px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. 焦点の輪郭 — 大会ページと同じ見え方にします
   -------------------------------------------------------------------------- */
.hf26-ai :focus-visible {
	outline: 2px solid var(--hf-ai-cold);
	outline-offset: 2px;
}

.hf26-ai__head :focus-visible,
.hf26-ai .hf26-ai__launcher:focus-visible {
	outline-color: var(--hf-ai-cold-ink);
}

/* --------------------------------------------------------------------------
   5. スマートフォン

   大会の固定エントリーボタン（.hf26-dock・高さ約68px）の上に置きます。
   パネルを開いているあいだは、その固定ボタンを引っ込めます。
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.hf26-ai {
		/* 固定エントリーボタン（約68px）と reCAPTCHA バッジの両方をよけます。 */
		--hf-ai-clear: 96px;
	}

	.hf26-ai .hf26-ai__launcher {
		right: max(12px, env(safe-area-inset-right, 0px));
		left: max(12px, env(safe-area-inset-left, 0px));
		max-width: none;
	}

	.hf26-ai__panel {
		top: max(10px, env(safe-area-inset-top, 0px));
		right: max(8px, env(safe-area-inset-right, 0px));
		bottom: max(8px, env(safe-area-inset-bottom, 0px));
		left: max(8px, env(safe-area-inset-left, 0px));
		width: auto;
		max-height: none;
	}

	/* 端末の縁いっぱいまで使うので、外側の骨色の輪郭は落とします。 */
	.hf26-ai__panel {
		box-shadow: 0 0 0 1px rgba(242, 239, 231, 0.24);
	}

	.hf26-ai__foot-actions {
		justify-content: flex-start;
		gap: 0 16px;
	}
}

@media (max-width: 359px) {
	.hf26-ai .hf26-ai__launcher {
		gap: 8px;
		padding: 9px 12px;
	}

	.hf26-ai__launcher-sub {
		display: none;
	}
}

/* 開いているあいだは、大会の固定エントリーボタンを隠します。
   .hf26 .hf26-dock.is-shown (0,3,0) を上回る詳細度で指定します。 */
html.hf26-ai-open .hf26 .hf26-dock,
html.hf26-ai-open .hf26 .hf26-dock.is-shown {
	transform: translateY(102%);
	visibility: hidden;
}

/* スクロールを止めます。消えたスクロールバーぶんは padding で埋め、
   ページが横にずれないようにします。 */
html.hf26-ai-open {
	overflow: hidden;
	padding-right: var(--hf-ai-sbw, 0px);
}

/* --------------------------------------------------------------------------
   6. 動きを減らす設定
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hf26-ai,
	.hf26-ai * {
		animation: none !important;
		transition: none !important;
	}

	.hf26-ai__dots i {
		opacity: 0.6;
	}
}

/* --------------------------------------------------------------------------
   7. 印刷 — 案内窓口は紙に出しません
   -------------------------------------------------------------------------- */
@media print {
	.hf26-ai {
		display: none !important;
	}
}