/* studio TSUZURI お問合せフォーム
 *
 * ★ 見た目はサイト本体に合わせている。次の作法は崩さないこと。
 *   ① 太字を使わない (font-weight は 400 のみ)。強調は字間・余白・色で行う
 *   ② 角丸と影を使わない。四角と細い罫線だけで組む
 *   ③ 色数を絞る。#1E2A33 / #5C6670 / #E3E7EA / #12787A
 *     (LINE のボタンだけは例外で、機能の手がかりとしてブランドカラーを残す)
 *   ④ 字間は広め、行間はたっぷり
 *
 * ★ 見た目を整えても、次の 3 つは絶対に落とさないこと。
 *   ・入力欄の文字は 16px 以上 (下回ると iPhone が勝手に拡大する)
 *   ・押せるものの高さは 44px 以上
 *   ・キーボード操作で「いまどこにいるか」が分かること (:focus-visible)
 *
 * ★ 地と面の関係で奥行きを出している。
 *   フォームの地 = ほんのり色のついた面 (--tzr-ground)
 *   入力するところ = 白 (--tzr-field)
 *   この 2 段だけで「ここに書く」が伝わるので、囲みや影を足さないこと。
 */

.tzr-form-wrap {
	--tzr-font: Arial, "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;

	--tzr-ink: #1e2a33;    /* 見出し・ラベル・入力された文字 */
	--tzr-sub: #5c6670;    /* 本文・補足 */
	--tzr-line: #dfe6e7;   /* 罫線 (地の上で見えるよう、白地のときより少し濃い) */
	--tzr-line-soft: #e8eded; /* いちばん弱い区切り */
	--tzr-accent: #12787a; /* 深いティール。リンクとアクセントだけ */
	--tzr-accent-dark: #0d5f61;

	--tzr-ground: #f4f7f7; /* フォームの地 */
	--tzr-field: #ffffff;  /* 書き込むところ */

	--tzr-line-green: #06c755;
	--tzr-line-green-dark: #05b34c;

	max-width: 720px;
	margin: 0 auto;
	padding: 64px 48px 72px;
	background: var(--tzr-ground);
	color: var(--tzr-sub);
	font-family: var(--tzr-font);
	font-size: 15px;
	line-height: 2.2;
	/* ★ 質問まわり (質問名・補足・選択肢・入力された文字) 以外は中央ぞろえ。
	   ここで一度そろえてから、左に戻すものだけを戻す。 */
	text-align: center;
	box-sizing: border-box;
}

.tzr-form-wrap *,
.tzr-form-wrap *::before,
.tzr-form-wrap *::after {
	box-sizing: border-box;
}

/* ★ テーマ側の指定で、中身が枠からはみ出すことがある。
   (記事本文を全幅に広げる width:100vw / 負のマージン / 独自の max-width など)
   このプラグインはどんなテーマの上に置かれるか分からないので、ここで必ず内側に収める。 */
.tzr-form-wrap {
	overflow: hidden;
}

.tzr-form-wrap * {
	min-width: 0;
}

/* ★ !important を付けているのは、テーマが本文の p などに独自の max-width /
   width を当てていることが多く、そのままだと
   「枠は広いのに文字だけ途中で折り返される」ちぐはぐな見た目になるため。
   フォームの幅はこのファイルだけで決める、と割り切っている。 */
/* ★ クラス名を 2 回重ねているのは、テーマ側が同じ強さの !important を
   使っていても必ずこちらが勝つようにするため (見た目は変わらない)。 */
/* ★ クラスを 3 回重ねているのは、プラグインが本文に直接書き出す
   <style id="tzr-lf-layout"> がこのファイルより後ろに置かれ、同じ強さだと
   向こうが勝ってしまうため。このファイルだけ差し替えても効くようにしている。 */
.tzr-form-wrap.tzr-form-wrap.tzr-form-wrap {
	max-width: 720px !important;
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 64px 48px 72px !important;
	float: none !important;
	/* 地の色そのものが「ここからここまで」を示すので、囲みの罫線は引かない */
	border: none !important;
	border-radius: 0 !important;
	background: var(--tzr-ground) !important;
}

/* ★ 止めたいのは「幅の暴走」だけ。余白まで 0 にしてはいけない。
   label には選択肢のボタン (.tzr-chip) が含まれるので、左右の余白を消すと
   文字が枠にくっついて読めなくなる。余白は各パーツの設計に任せる。 */
.tzr-form-wrap.tzr-form-wrap p,
.tzr-form-wrap.tzr-form-wrap div,
.tzr-form-wrap.tzr-form-wrap form,
.tzr-form-wrap.tzr-form-wrap label,
.tzr-form-wrap.tzr-form-wrap details,
.tzr-form-wrap.tzr-form-wrap h1,
.tzr-form-wrap.tzr-form-wrap h2,
.tzr-form-wrap.tzr-form-wrap h3 {
	max-width: 100% !important;
	min-width: 0 !important;
	float: none !important;
	inset-inline: auto !important;
	transform: none !important;
}

/* ★ 文章だけは、テーマが付ける左右の余白・字下げも打ち消す。
   打ち消さないと文章が片側に寄り、狭い幅で折り返される。 */
.tzr-form-wrap.tzr-form-wrap .tzr-intro,
.tzr-form-wrap.tzr-form-wrap .tzr-note,
.tzr-form-wrap.tzr-form-wrap .tzr-note-small,
.tzr-form-wrap.tzr-form-wrap .tzr-label,
.tzr-form-wrap.tzr-form-wrap .tzr-row,
.tzr-form-wrap.tzr-form-wrap .tzr-agree-link,
.tzr-form-wrap.tzr-form-wrap .tzr-send-title,
.tzr-form-wrap.tzr-form-wrap .tzr-send-lead,
.tzr-form-wrap.tzr-form-wrap .tzr-choices {
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-indent: 0 !important;
}

/* エラー欄は左に縦罫を引くので、共通の「左右の余白 0」から外して個別に持たせる。
   0 にすると罫線と文字がくっついて読めなくなる。 */
.tzr-form-wrap.tzr-form-wrap.tzr-form-wrap .tzr-errors {
	padding: 18px 22px !important;
	text-indent: 0 !important;
}

.tzr-form-wrap.tzr-form-wrap .tzr-agree-link {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.tzr-form-wrap.tzr-form-wrap.tzr-form-wrap .tzr-agree-link a {
	padding: 12px 24px !important;
	text-indent: 0 !important;
}

/* ★ ボタンと注記の間は、テーマが段落の余白を消してくることがあるので強い指定で守る。 */
.tzr-form-wrap.tzr-form-wrap .tzr-note {
	margin-top: 28px !important;
}

.tzr-form-wrap.tzr-form-wrap .tzr-note-small {
	margin-top: 0 !important;
	margin-bottom: 14px !important;
}

/* テーマの中央寄せ・はみ出しマージンを打ち消すのは、直下の要素だけでよい */
/* ★ :not(...) でボタン・入力欄を外すこと。外さないと width:100% が打ち消され、
   送信ボタンが細く左に寄る (実際にそうなっていた)。 */
.tzr-form-wrap.tzr-form-wrap > *:not(button):not(input):not(textarea):not(select),
.tzr-form-wrap.tzr-form-wrap > form > *:not(button):not(input):not(textarea):not(select) {
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.tzr-form-wrap.tzr-form-wrap input,
.tzr-form-wrap.tzr-form-wrap textarea,
.tzr-form-wrap.tzr-form-wrap select,
.tzr-form-wrap.tzr-form-wrap button {
	max-width: 100% !important;
	float: none !important;
}

/* ★ すぐ上の「input/textarea/select/button は max-width:100%」に負けるので、
   送信ボタンだけは同じ強さで上書きする。これが無いと横幅いっぱいのベタ塗りになる。
   ★ 左右の margin も必ずここで auto にすること。下の
     「.tzr-form-wrap form > * { margin-left: 0 }」のほうが指定として強く、
     .tzr-submit 側の margin:auto が打ち消されて左に寄る (実際にそうなっていた)。 */
.tzr-form-wrap.tzr-form-wrap .tzr-submit {
	max-width: 420px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.tzr-form-wrap.tzr-form-wrap .tzr-form,
.tzr-form-wrap.tzr-form-wrap .tzr-agree,
.tzr-form-wrap.tzr-form-wrap .tzr-send {
	padding: 0 !important;
}

.tzr-form-wrap > *,
.tzr-form-wrap form > * {
	margin-left: 0;
	margin-right: 0;
	inset-inline: auto;
}

/* 長いメールアドレスや URL でも横に押し広げない。
   ★ anywhere ではなく break-word にすること。anywhere は「最小幅」の計算にも
   効いてしまい、狭い所で不必要に文字が折り返される原因になる。 */
.tzr-form-wrap p,
.tzr-form-wrap label,
.tzr-form-wrap span,
.tzr-form-wrap a {
	overflow-wrap: break-word;
	word-break: normal;
}

/* 案内文 ------------------------------------------------------------ */

.tzr-intro {
	margin: 0 auto 60px;
	max-width: 34em;
	color: var(--tzr-sub);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 2.4;
}

/* 設問 -------------------------------------------------------------- */

.tzr-row {
	margin: 0;
	padding: 0;
	border: none;
	text-align: left;
}

.tzr-row + .tzr-row {
	margin-top: 44px;
}

/* 質問名。字間を広めに取って、入力欄との関係を見出しらしく見せる */
.tzr-label {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	text-align: left;
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.9;
}

.tzr-label-text {
	font-weight: 400;
	color: var(--tzr-ink);
}

/* 必須／任意は塗らない。細い枠と文字色だけで見分ける */
.tzr-badge {
	flex: none;
	padding: 2px 9px;
	border: 1px solid;
	border-radius: 0;
	background: none;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.14em;
}

.tzr-badge-req {
	border-color: var(--tzr-accent);
	color: var(--tzr-accent);
}

.tzr-badge-any {
	border-color: #c6d0d2;
	color: var(--tzr-sub);
}

/* ★ 質問名とひと続きの説明なので、質問名と同じ左ぞろえにする。 */
.tzr-note-small {
	margin: 0 0 14px;
	color: var(--tzr-sub);
	text-align: left;
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
}

/* 入力欄 — 地の上に「書く場所」を白で置く -------------------------- */

.tzr-form input[type="text"],
.tzr-form input[type="email"],
.tzr-form input[type="tel"],
.tzr-form input[type="date"],
.tzr-form select,
.tzr-form textarea {
	display: block;
	width: 100%;
	min-height: 56px; /* 指で押せる高さを保つ */
	padding: 15px 18px;
	border: 1px solid var(--tzr-line);
	border-radius: 0;
	background: var(--tzr-field);
	color: var(--tzr-ink);
	font-size: 16px; /* 16px未満だとiPhoneで自動ズームするため下げない */
	font-family: inherit;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.8;
	/* ★ 打った文字は左のまま。中央ぞろえにすると、1 文字入れるたびに
	   文字全体が左右へ動いて非常に打ちにくくなる。 */
	text-align: left;
	transition: border-color 0.25s ease, background-color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tzr-form textarea {
	min-height: 168px;
	line-height: 2.1;
	resize: vertical;
}

.tzr-form input::placeholder,
.tzr-form textarea::placeholder {
	color: #9aa4ab;
}

.tzr-form input:hover,
.tzr-form select:hover,
.tzr-form textarea:hover {
	border-color: #c6d3d4;
}

.tzr-form input:focus,
.tzr-form select:focus,
.tzr-form textarea:focus {
	outline: none;
	border-color: var(--tzr-accent);
}

/* ★ キーボードで操作している方には、枠の色替えだけでは弱い。
   内側に引いて、地との境で切られないようにする。 */
.tzr-form input:focus-visible,
.tzr-form select:focus-visible,
.tzr-form textarea:focus-visible {
	outline: 2px solid rgba(18, 120, 122, 0.45);
	outline-offset: -3px;
}

/* 矢印は細い山形にする */
.tzr-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235c6670' stroke-width='1'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-position: right 18px center;
	background-size: 12px 8px;
	background-repeat: no-repeat;
	padding-right: 44px;
	color: var(--tzr-ink);
}

/* 選択式 — 角丸のない矩形。選んでも塗りつぶさない -------------------- */

.tzr-choices {
	display: flex;
	flex-wrap: wrap;
	/* ★ 選択肢は左詰め。質問名・入力欄と頭がそろう */
	justify-content: flex-start;
	gap: 10px;
	margin-top: 2px;
}

.tzr-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	min-height: 56px; /* 入力欄と高さをそろえる */
	padding: 14px 24px;
	border: 1px solid var(--tzr-line);
	border-radius: 0;
	background: var(--tzr-field);
	color: var(--tzr-sub);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.8;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.tzr-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.tzr-chip:hover {
	border-color: var(--tzr-accent);
	color: var(--tzr-accent);
}

/* 選択中も塗らない。枠と文字の色だけで示す */
.tzr-chip.is-checked,
.tzr-chip:has(input:checked) {
	border-color: var(--tzr-accent);
	background: var(--tzr-field);
	color: var(--tzr-accent);
	font-weight: 400;
}

.tzr-chip:has(input:focus-visible) {
	outline: 2px solid rgba(18, 120, 122, 0.45);
	outline-offset: -3px;
}

/* 同意チェック ------------------------------------------------------ */

/* ★ ここに横罫を引いてはいけない。すぐ上の入力欄の枠と近すぎて、
   2 本の線が並んで「何の線か分からない」状態になる (実際にご指摘をいただいた)。
   同意欄はチェックボックスがあるので、余白だけでも他と見分けられる。 */
.tzr-agree {
	margin: 64px 0 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
}

.tzr-agree label {
	display: inline-flex;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 2;
	color: var(--tzr-sub);
	text-align: left;
}

.tzr-agree input {
	flex: none;
	width: 22px;
	height: 22px;
	/* ★ 左右も 0 にすること。ブラウザ既定の余白が残ると、頭の位置がずれる。 */
	margin: 7px 0 0;
	accent-color: var(--tzr-accent);
}

/* ★ ここだけ四角で囲う。同意をお願いする以上、読む手段が「押せるもの」だと
   一目で分かる必要がある。塗らず、角も丸めず、1px の枠だけで示す。 */
.tzr-agree-link {
	margin: 20px 0 0;
	font-size: 15px;
	line-height: 2;
}

.tzr-agree-link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px; /* 指で押せる高さを保つ */
	padding: 12px 24px;
	border: 1px solid var(--tzr-accent);
	border-radius: 0;
	background: var(--tzr-field);
	color: var(--tzr-accent);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.tzr-agree-link a:hover,
.tzr-agree-link a:focus {
	background: var(--tzr-accent);
	color: #fff;
	text-decoration: none;
}

.tzr-agree-link a:focus-visible {
	outline: 2px solid var(--tzr-accent);
	outline-offset: 2px;
}

.tzr-agree-note {
	display: block;
	margin-top: 12px;
	color: var(--tzr-sub);
	font-size: 14px;
	line-height: 2;
}

/* 送信ボタン -------------------------------------------------------- */

.tzr-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	min-height: 62px;
	margin: 56px auto 0;
	padding: 18px 32px;
	border: none;
	border-radius: 0;
	/* LINE のブランドカラー。ここだけ色を残す。
	   「LINEに飛ぶ」という機能の手がかりが無くなると、押した先が想像できないため。 */
	background: var(--tzr-line-green);
	color: #fff;
	font-size: 16px;
	font-family: inherit;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.25s ease;
}

.tzr-submit:hover {
	background: var(--tzr-line-green-dark);
}

.tzr-submit:focus-visible {
	outline: 2px solid var(--tzr-accent-dark);
	outline-offset: 3px;
}

.tzr-submit[disabled] {
	background: #b8c0c5;
	cursor: default;
}

.tzr-note {
	margin: 28px auto 0;
	max-width: 32em;
	color: var(--tzr-sub);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 2.1;
	text-align: center;
	text-wrap: balance;
}

/* ★ 太字はサイト全体で使わないので、いちばん伝えたい一文は色で示す。 */
.tzr-note strong {
	font-weight: 400;
	color: #b03a2e;
	letter-spacing: 0.06em;
}

/* エラー ------------------------------------------------------------ */

.tzr-errors {
	margin: 0 0 48px;
	padding: 18px 22px;
	border: none;
	border-left: 2px solid var(--tzr-accent);
	background: var(--tzr-field);
	color: var(--tzr-sub);
	font-size: 15px;
	font-weight: 400;
	line-height: 2.2;
	/* ★ ここだけ左のまま。直すべき項目が並ぶので、中央ぞろえだと
	   1 行ずつ頭の位置が変わって読みにくい。 */
	text-align: left;
}

.tzr-errors p {
	margin: 0 0 4px;
	color: var(--tzr-ink);
	font-weight: 400;
	letter-spacing: 0.06em;
}

.tzr-errors ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: none;
}

.tzr-errors li::before {
	content: "・";
	margin-left: -1.2em;
}

/* 送信後の画面 ------------------------------------------------------ */

.tzr-send {
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
}

.tzr-send-title {
	margin: 0 0 20px;
	font-family: inherit;
	font-size: 19px;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.9;
	color: var(--tzr-ink);
}

.tzr-send-lead {
	margin: 0 auto 40px;
	max-width: 32em;
	color: var(--tzr-sub);
	font-size: 15px;
	font-weight: 400;
	line-height: 2.3;
}

.tzr-line-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	min-height: 62px;
	margin: 0 auto;
	padding: 18px 32px;
	border-radius: 0;
	background: var(--tzr-line-green);
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.25s ease;
}

.tzr-line-button:hover,
.tzr-line-button:focus {
	background: var(--tzr-line-green-dark);
	color: #fff;
	text-decoration: none;
}

.tzr-form-wrap.tzr-form-wrap .tzr-send .tzr-note {
	margin: 24px auto 0 !important;
}

.tzr-back {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--tzr-line-soft);
	font-size: 14px;
}

.tzr-back a {
	color: var(--tzr-sub);
	text-underline-offset: 5px;
}

.tzr-fallback {
	margin: 48px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--tzr-line-soft);
}

.tzr-fallback summary {
	cursor: pointer;
	color: var(--tzr-accent);
	font-size: 14px;
	letter-spacing: 0.06em;
	list-style: none;
}

.tzr-fallback summary::-webkit-details-marker {
	display: none;
}

.tzr-fallback summary::before {
	content: "＋　";
}

.tzr-fallback[open] summary::before {
	content: "－　";
}

.tzr-fallback p {
	margin: 18px 0 10px;
	color: var(--tzr-sub);
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
}

.tzr-fallback textarea {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid var(--tzr-line);
	border-radius: 0;
	background: var(--tzr-field);
	color: var(--tzr-ink);
	font-size: 16px;
	font-family: inherit;
	line-height: 2;
	/* コピーしていただく本文なので左のまま */
	text-align: left;
	resize: vertical;
}

.tzr-fallback a {
	color: var(--tzr-accent);
	text-underline-offset: 5px;
}

/* ボット対策の隠し欄 */

.tzr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.tzr-form-wrap * {
		transition: none !important;
	}
}

@media (max-width: 767px) {
	.tzr-form-wrap.tzr-form-wrap.tzr-form-wrap {
		padding: 44px 20px 52px !important;
	}

	.tzr-intro {
		margin-bottom: 44px;
	}

	.tzr-row + .tzr-row {
		margin-top: 36px;
	}

	.tzr-label {
		letter-spacing: 0.06em;
	}

	.tzr-choices {
		gap: 8px;
	}

	.tzr-chip {
		min-width: 88px;
		min-height: 52px;
		padding: 12px 18px;
		font-size: 14.5px;
	}

	.tzr-agree {
		margin-top: 48px;
	}

	.tzr-form-wrap.tzr-form-wrap .tzr-submit {
		/* 画面が狭いときは幅いっぱいのほうが押しやすい */
		max-width: 100% !important;
	}

	.tzr-submit {
		margin-top: 44px;
		padding: 18px 20px;
		letter-spacing: 0.1em;
	}

	.tzr-line-button {
		max-width: 100%;
		padding: 18px 20px;
		letter-spacing: 0.1em;
	}

	.tzr-note {
		font-size: 12.5px;
	}
}