/* ===================================================================
TRY18 基本条件入力フォーム（正式版 Ver.1.0・SWELL「追加CSS」貼り付け用コード）
===================================================================

【貼り付け先】
WP管理画面 → 外観（カスタマイズ） → SWELL設定 → 追加CSS
　または、外観 → カスタマイズ → 追加CSS（テーマ標準機能）
下記の内容を全文コピーし、追加CSS欄の末尾に貼り付けて保存してください。
（既存の追加CSSがある場合は、末尾に追記する形で問題ありません。）

【ベースにしたファイル】
css/try18-style.css（プロトタイプ版）を全面的にベースとしています。
プロトタイプの見た目・レイアウト・レスポンシブ挙動をできる限り
そのまま再現しつつ、以下の点を本番のWordPress + SWELL + Contact Form 7 +
Contact Form 7 Conditional Fields (wpcf7cf) 環境向けに調整しています。

【プロトタイプ版からの主な変更点】
1. SWELLテーマの既存スタイル（ボタン・入力欄・見出し等）との詳細度
   （specificity）競合を避けるため、フォーム全体を囲う
   .try18-formwrap 配下に対してのみスタイルを適用するセレクタ構成を
   維持しつつ、一部のCF7標準クラス（.wpcf7-form-control-wrap,
   .wpcf7-not-valid-tip, .wpcf7-response-output 等）に対する
   上書き・共存スタイルを追加しています。
2. wpcf7cfプラグインが実際に使用するクラス
   （.wpcf7cf_group, .wpcf7cf-hidden, .wpcf7cf_dynamic-hidden-field 等）
   に対するリセット・非表示スタイルを追加しています。
   ・wpcf7cfは表示/非表示をクラスの付与で行うため、[hidden]属性を前提と
     した箇所とは別に、これらのクラスでも確実に非表示になるようにしています。
3. 【重要／Phase1で発見された不具合の再発防止】
   プロトタイプ検証時、.try18-final-confirm-overlay に
   display:flex を無条件指定していたため、[hidden] のUA標準スタイル
   （display:none）よりCSS詳細度が高くなり、JS側でhidden属性をtrueに
   してもモーダルが見た目上消えない不具合が発生しました。
   本ファイルでも同様の構造（無条件のdisplay指定）を持つ要素すべてに対し、
   [hidden] を明示的に上書きする対策セレクタを維持・追加しています。
   （.try18-final-confirm-overlay[hidden], .try18-step-panel[hidden],
     .try18-conditional-box[hidden], .try18-hairmake-dispatch-box[hidden] 等）
4. SWELLの固定ヘッダー・WordPress管理者バーとの重なりを避けるため、
   .try18-step-navigation のsticky位置は、JS側
   （wordpress-form-script.js の updateExternalFixedHeaderOffset()）が
   自動検出したオフセット値をinlineスタイル（top）で都度上書きする設計を
   維持しています。本CSSでは初期値・フォールバック値のみを指定します。
   ※SWELL側で固定ヘッダーの高さが機種依存で変わる場合でも、JSが自動検出
   するため、本CSSの数値を手動調整する必要は基本的にありません。
5. STEP2内のヘアメイク派遣条件を囲う要素は、wpcf7cfの [group] ではなく通常のdivである
   .try18-hairmake-dispatch-box としているため、そのクラスに対しても
   .try18-conditional-box と同等のレイアウト崩れ防止スタイルを適用します。
=================================================================== */


/* ===================================================================
0. SWELL・CF7・wpcf7cf との競合対策（最優先で読み込まれる想定）
=================================================================== */

/* SWELLの本文コンテンツ幅制限やbox-sizing指定と衝突しないよう、
   フォーム全体のスコープ内でのみbox-sizingを明示する。 */
.try18-formwrap,
.try18-formwrap * {
	box-sizing: border-box;
}

/* SWELLの投稿本文devicewide指定などでmax-widthが競合するケースがあるため、
   フォームラッパー自身の幅指定はここで明示的に固定する。 */
.try18-formwrap {
	max-width: 860px;
	margin: 0 auto;
	padding-bottom: 40px;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

/* SWELLテーマの見出し(h2等)の既存デザイン（下線・アイコン等の疑似要素）を
   フォーム内の見出しにだけ無効化し、プロトタイプ見た目を優先する。 */
.try18-formwrap .try18-section-title {
	all: unset;
	display: block;
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 18px 22px;
	background: linear-gradient(135deg, #063d4d, #08708a);
	color: #fff;
	border-radius: 12px 12px 0 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.try18-formwrap .try18-section-title::before,
.try18-formwrap .try18-section-title::after {
	content: none !important;
}

/* SWELLの投稿内リンク色・ボタン装飾がCF7標準ボタンへ干渉するのを防止 */
.try18-formwrap .try18-btn,
.try18-formwrap .try18-quick-btn,
.try18-formwrap .try18-area-select-all-btn,
.try18-formwrap .try18-area-deselect-all-btn,
.try18-formwrap .try18-confirm-edit-btn,
.try18-formwrap .try18-step-item {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}

/* CF7標準の [submit] ボタンにも上記ボタン群と同じ見た目を適用する。
   CF7は input[type="submit"] を生成するため、.try18-btn クラスを
   付与したうえで input 要素向けの装飾を明示的に指定する。 */
.try18-formwrap input.try18-btn[type="submit"] {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* CF7標準の必須マーク（span.wpcf7-form-control_required-tick(*)）は
   プロトタイプ側の .try18-required バッジで統一表示するため隠す。 */
.try18-formwrap .wpcf7-form-control_required-tick {
	display: none;
}

/* CF7標準の個別フィールドエラー表示（下に出る赤枠のツールチップ）は
   .try18-error-message で統一表示するため非表示にする。
   （ただしCF7自身のフォーカス移動・validationは無効化しない） */
.try18-formwrap .wpcf7-not-valid-tip {
	display: none !important;
}

/* CF7が入力欄に付与する .wpcf7-form-control-wrap は
   レイアウトに影響を与えない透明なラッパーとして扱う。 */
.try18-formwrap .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

/* CF7標準のフォーム全体メッセージ（wpcf7-response-output）は
   本フォームでは独自の完了画面／エラー誘導で代替するため、
   通常時は非表示にしておく（wpcf7mailfailed等の際にJSが
   一時的に表示させたい場合は、JS側で display を上書きする）。 */
.try18-formwrap .wpcf7-response-output,
.try18-final-confirm-overlay .wpcf7-response-output {
	display: none;
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.6;
}

.try18-formwrap .wpcf7-response-output.wpcf7-mail-sent-ok {
	display: none; /* 成功時は完了画面へ切り替えるため非表示のまま維持 */
}

.try18-formwrap .wpcf7-response-output.wpcf7-validation-errors,
.try18-formwrap .wpcf7-response-output.wpcf7-mail-sent-ng,
.try18-formwrap .wpcf7-response-output.wpcf7-spam-blocked {
	display: block;
	background: #fff0ef;
	border: 1px solid #f0c6c3;
	color: #c73737;
	font-weight: 700;
}

/* wpcf7cfプラグインが表示制御に使う実クラスへの対応。
   本フォームではJS側の isInsideHiddenConditionalBox() が
   wpcf7cfの実クラス（.wpcf7cf-hidden 等）を判定に用いる設計だが、
   CSSレベルでも確実に非表示化されるよう明示しておく。 */
.try18-formwrap .wpcf7cf-hidden {
	display: none !important;
}

/* wpcf7cfの [group] ラッパー自体に不要なmargin/paddingが
   入らないようにする（wpcf7cf標準の挙動と同様にリセット）。 */
.try18-formwrap .wpcf7cf_group {
	margin: 0 !important;
	padding: 0 !important;
	display: block;
}


/* ---------- 基本設定 ---------- */

.try18-formwrap {
	background: transparent;
	color: #1f2d33;
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

/* ---------- セクション見出し（h2以外の要素で使う場合の保険） ---------- */

.try18-formwrap .try18-section-title + .try18-section-title {
	margin-top: 0;
}

/* ---------- 案内ボックス ---------- */

.try18-formwrap .try18-info-box {
	margin: 0 0 24px;
	padding: 18px 20px;
	background: #f0f8fb;
	border-left: 5px solid #08708a;
	border-radius: 10px;
	line-height: 1.8;
}

.try18-formwrap .try18-info-box p {
	margin: 0 0 8px;
}

.try18-formwrap .try18-info-box p:last-child {
	margin-bottom: 0;
}

/* ---------- 入力カード ---------- */

.try18-formwrap .try18-field-card {
	margin: 0 0 22px;
	padding: 24px;
	background: #fff;
	border: 1px solid #dce8eb;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.045);
}

/* ---------- フィールド行 ---------- */

.try18-formwrap .try18-field-row {
	margin: 0 0 20px;
}

.try18-formwrap .try18-field-row:last-child {
	margin-bottom: 0;
}

.try18-formwrap .try18-label-text {
	display: block;
	margin: 0 0 6px;
	color: #12313a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.try18-formwrap .try18-note {
	margin: 0 0 10px;
	color: #6f838b;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
}

.try18-formwrap .try18-required {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	background: #d94343;
	color: #fff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	vertical-align: middle;
}

/* ---------- 入力欄（CF7が実際に出力するinput/select/textareaに対応） ---------- */

.try18-formwrap .try18-field-control {
	position: relative;
}

.try18-formwrap .try18-field-control input[type="text"],
.try18-formwrap .try18-field-control input[type="email"],
.try18-formwrap .try18-field-control input[type="tel"],
.try18-formwrap .try18-field-control input[type="number"],
.try18-formwrap .try18-field-control select,
.try18-formwrap .try18-field-control textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 13px 15px;
	background: #fbfdfe;
	border: 1px solid #d4e1e5;
	border-radius: 10px;
	color: #1f2d33;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.5;
	min-height: 48px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.try18-formwrap .try18-field-control textarea {
	min-height: 110px;
	resize: vertical;
}

.try18-formwrap .try18-field-control input:focus,
.try18-formwrap .try18-field-control select:focus,
.try18-formwrap .try18-field-control textarea:focus {
	outline: none;
	background: #fff;
	border-color: #08708a;
	box-shadow: 0 0 0 3px rgba(8, 112, 138, 0.12);
}

/* ---------- エラー状態 ---------- */

.try18-formwrap .try18-field-row.has-error .try18-label-text {
	color: #c73737;
}

.try18-formwrap .try18-field-row.has-error .try18-field-control input,
.try18-formwrap .try18-field-row.has-error .try18-field-control select,
.try18-formwrap .try18-field-row.has-error .try18-field-control textarea {
	border-color: #d94343;
	background: #fff6f5;
	box-shadow: 0 0 0 3px rgba(217, 67, 67, 0.1);
}

.try18-formwrap .try18-field-row.has-error .try18-checkbox-group .wpcf7-list-item label {
	border-color: #d94343;
}

.try18-formwrap .try18-error-message {
	display: none;
	margin: 6px 0 0;
	padding: 6px 10px;
	background: #fff0ef;
	border-radius: 8px;
	color: #c73737;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
}

.try18-formwrap .try18-field-row.has-error .try18-error-message {
	display: block;
}

/* ---------- 「いずれか1つ以上」グループエラー（ランク／距離帯／エリア選択） ---------- */

.try18-formwrap [data-atleastone-group] {
	transition: box-shadow 0.15s ease;
}

.try18-formwrap [data-atleastone-group].has-atleastone-error {
	box-shadow: 0 0 0 2px rgba(217, 67, 67, 0.35);
	border-radius: 14px;
}

.try18-formwrap .try18-conditional-box.has-atleastone-error {
	border-left-color: #d94343;
	background: #fff8f7;
}

.try18-formwrap .try18-distance-table.has-atleastone-error {
	padding: 4px;
}

.try18-formwrap p.try18-error-message[data-error-for-group] {
	display: none;
	margin: 0 0 16px;
	padding: 10px 14px;
	background: #fff0ef;
	border-left: 4px solid #d94343;
	border-radius: 8px;
	color: #c73737;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
}

/* ---------- 距離帯：1行単位のエラー表示 ---------- */

.try18-formwrap .try18-distance-row.has-row-error {
	border-color: #d94343;
	background: #fff8f7;
	box-shadow: 0 0 0 2px rgba(217, 67, 67, 0.12);
}

.try18-formwrap .try18-distance-row-error {
	display: none;
	margin: 12px 0 0;
	padding: 8px 12px;
	background: #fff0ef;
	border-radius: 8px;
	color: #c73737;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
}

.try18-formwrap .try18-distance-row.has-row-error .try18-distance-row-error {
	display: block;
}

/* ---------- クイック選択ボタン（保証時間・入り時間） ---------- */

.try18-formwrap .try18-quick-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.try18-formwrap .try18-quick-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 7px 15px;
	background: #f4f9fa;
	border: 1px solid #d4e1e5;
	border-radius: 999px;
	color: #405b64;
	font-size: 13px;
	font-weight: 700;
	transition: 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.try18-formwrap .try18-quick-btn:hover {
	background: #eef7f9;
	border-color: #08708a;
	color: #08708a;
}

.try18-formwrap .try18-quick-btn.is-selected {
	background: #08708a;
	border-color: #08708a;
	color: #fff;
}

/* ---------- 補足・条件分岐ボックス（wpcf7cf連携） ---------- */

.try18-formwrap .try18-sub-note,
.try18-formwrap .try18-conditional-box {
	margin: 16px 0 20px;
	padding: 16px 18px;
	background: #f8fbfc;
	border: 1px solid #dce8eb;
	border-radius: 12px;
	line-height: 1.8;
}

.try18-formwrap .try18-conditional-box,
.try18-formwrap .try18-hairmake-dispatch-box {
	border-left: 4px solid #08708a;
}

/* 【重要／Phase1不具合の再発防止】
   .try18-conditional-box / .try18-hairmake-dispatch-box に無条件の
   display指定を今後追加した場合でも、[hidden] 属性が確実に優先されるよう
   常にこの上書きセレクタを維持する。
   wpcf7cfが付与する .wpcf7cf-hidden クラスに対しても同様に対応済み
   （本ファイル冒頭「0.」節を参照）。 */
.try18-formwrap .try18-conditional-box[hidden],
.try18-formwrap .try18-hairmake-dispatch-box[hidden] {
	display: none !important;
}

.try18-formwrap .try18-sub-note p {
	margin: 0 0 8px;
}

.try18-formwrap .try18-sub-note p:last-child {
	margin-bottom: 0;
}

.try18-formwrap .try18-sub-note strong {
	color: #12313a;
}

/* ---------- 内部グリッド ---------- */

.try18-formwrap .try18-inner-fields {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 10px 18px;
	align-items: center;
	margin-top: 16px;
}

.try18-formwrap .try18-inner-fields .try18-field-row {
	margin: 0;
	display: contents;
}

.try18-formwrap .try18-inner-fields .try18-label-text {
	margin: 0;
	font-size: 15px;
}

.try18-formwrap .try18-inner-fields .try18-field-control input {
	margin: 0;
}

/* ---------- チェックボックス（CF7の [checkbox] 出力DOMに対応） ---------- */

.try18-formwrap .try18-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.try18-formwrap .wpcf7-list-item {
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 0;
}

.try18-formwrap .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	margin: 0;
	padding: 10px 15px;
	background: #fff;
	border: 1px solid #d9e3e8;
	border-radius: 10px;
	color: #12313a;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.18s ease;
}

.try18-formwrap .wpcf7-list-item label:hover {
	background: #f0f8fb;
	border-color: #08708a;
}

.try18-formwrap .wpcf7-list-item input[type="checkbox"] {
	width: auto;
	max-width: none;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	transform: scale(1.25);
	accent-color: #08708a;
}

/* CF7が [checkbox] タグに自動付与する .wpcf7-list-item-label 等の
   追加spanがレイアウトを崩さないよう保険で明示する。 */
.try18-formwrap .wpcf7-list-item-label {
	display: inline;
}

/* ---------- 画像 ---------- */

.try18-formwrap .try18-image-box {
	margin: 18px 0 8px;
	text-align: center;
}

.try18-formwrap .try18-image-box img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border: 1px solid #dce8eb;
	border-radius: 10px;
}

/* ---------- details（エリア選択アコーディオン） ---------- */

.try18-formwrap .try18-field-card details,
.try18-formwrap .try18-conditional-box details {
	margin: 16px 0;
	padding: 16px 18px;
	background: #f8fbfc;
	border: 1px solid #dce8eb;
	border-radius: 12px;
}

.try18-formwrap .try18-field-card summary,
.try18-formwrap .try18-conditional-box summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	cursor: pointer;
	color: #08708a;
	font-weight: 700;
	font-size: 15px;
	padding: 4px 0;
	list-style: none;
}

.try18-formwrap .try18-field-card summary::-webkit-details-marker,
.try18-formwrap .try18-conditional-box summary::-webkit-details-marker {
	display: none;
}

.try18-formwrap .try18-area-summary-label {
	flex: 1 1 auto;
}

.try18-formwrap .try18-area-summary-label::before {
	content: "▸";
	display: inline-block;
	margin-right: 8px;
	color: #08708a;
	transition: transform 0.15s ease;
}

.try18-formwrap details[open] > summary .try18-area-summary-label::before {
	transform: rotate(90deg);
}

.try18-formwrap .try18-area-count-badge {
	flex-shrink: 0;
	padding: 4px 11px;
	background: #eef7f9;
	color: #08708a;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.try18-formwrap .try18-field-card details .try18-field-row:first-of-type,
.try18-formwrap .try18-conditional-box details .try18-field-row:first-of-type {
	margin-top: 14px;
}

/* ---------- エリアグループ 全選択／全解除ボタン ---------- */

.try18-formwrap .try18-area-group-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 4px;
	padding-bottom: 12px;
	border-bottom: 1px dashed #dce8eb;
}

.try18-formwrap .try18-area-select-all-btn,
.try18-formwrap .try18-area-deselect-all-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	transition: 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.try18-formwrap .try18-area-select-all-btn {
	background: #eef7f9;
	border: 1px solid #bfdfe6;
	color: #08708a;
}

.try18-formwrap .try18-area-select-all-btn:hover {
	background: #dff0f4;
}

.try18-formwrap .try18-area-deselect-all-btn {
	background: #f4f5f6;
	border: 1px solid #dadfe2;
	color: #6b7a80;
}

.try18-formwrap .try18-area-deselect-all-btn:hover {
	background: #e9ebec;
}

/* ---------- エリア選択：選択中サマリー ---------- */

.try18-formwrap .try18-area-summary {
	margin: 0 0 18px;
	padding: 15px 17px;
	background: #f0f8fb;
	border-left: 5px solid #08708a;
	border-radius: 10px;
}

.try18-formwrap .try18-area-summary-empty {
	margin: 0;
	color: #70858d;
	font-size: 13px;
	line-height: 1.6;
}

.try18-formwrap .try18-area-summary-heading {
	margin: 0 0 10px;
	color: #12313a;
	font-size: 13.5px;
	font-weight: 700;
}

.try18-formwrap .try18-area-summary-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.try18-formwrap .try18-area-summary-tag {
	display: inline-block;
	padding: 5px 12px;
	background: #fff;
	border: 1px solid #bfdfe6;
	border-radius: 999px;
	color: #08708a;
	font-size: 12px;
	font-weight: 700;
}

/* ===============================
ランク選択カード
=============================== */

.try18-formwrap .try18-rank-field-card {
	padding: 24px;
}

.try18-formwrap .try18-rank-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.try18-formwrap .try18-rank-heading-title {
	margin: 0;
	color: #12313a;
	font-size: 16px;
	font-weight: 700;
}

.try18-formwrap .try18-rank-heading-note {
	flex-shrink: 0;
	margin: 0;
	padding: 4px 10px;
	background: #eef7f9;
	color: #08708a;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.try18-formwrap .try18-rank-cards {
	display: grid;
	gap: 16px;
}

.try18-formwrap .try18-rank-card {
	position: relative;
	overflow: hidden;
	padding: 18px;
	background: #fff;
	border: 1px solid #d7e5e9;
	border-radius: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.try18-formwrap .try18-rank-card:hover {
	border-color: #08708a;
	box-shadow: 0 8px 20px rgba(8, 112, 138, 0.1);
	transform: translateY(-1px);
}

.try18-formwrap .try18-rank-card-regular {
	border: 2px solid #08708a;
	background: linear-gradient(180deg, #f7fcfd 0%, #fff 100%);
}

.try18-formwrap .try18-rank-recommend {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 5px 14px;
	background: #08708a;
	color: #fff;
	border-radius: 0 12px 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.try18-formwrap .try18-rank-check {
	margin-bottom: 14px;
	padding-bottom: 13px;
	border-bottom: 1px solid #e4edef;
}

.try18-formwrap .try18-rank-check .wpcf7-list-item {
	display: block;
	margin: 0;
}

.try18-formwrap .try18-rank-check .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	min-height: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	color: #12313a;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.try18-formwrap .try18-rank-check .wpcf7-list-item label:hover {
	background: transparent;
	border-color: transparent;
}

.try18-formwrap .try18-rank-check input[type="checkbox"] {
	width: 21px;
	height: 21px;
	margin: 0;
	padding: 0;
	transform: none;
	accent-color: #08708a;
}

.try18-formwrap .try18-rank-card-body {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.try18-formwrap .try18-rank-icon {
	display: block;
	width: 88px;
	height: 88px;
	overflow: hidden;
	background: transparent;
	border: 1px solid #e0eaed;
	border-radius: 50%;
	box-sizing: border-box;
	box-shadow: 0 4px 12px rgba(18, 49, 58, 0.08);
}

.try18-formwrap .try18-rank-icon img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	object-fit: cover;
	object-position: center;
	border: none;
	border-radius: 50%;
}

.try18-formwrap .try18-rank-content {
	min-width: 0;
}

.try18-formwrap .try18-rank-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.try18-formwrap .try18-rank-name {
	margin: 0;
	color: #12313a;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.try18-formwrap .try18-rank-badge {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	padding: 4px 9px;
	background: #eff6f8;
	color: #54717a;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

.try18-formwrap .try18-rank-card-regular .try18-rank-badge {
	background: #dff2f6;
	color: #076179;
}

.try18-formwrap .try18-rank-card-high .try18-rank-badge {
	background: #f8edf0;
	color: #9a5767;
}

.try18-formwrap .try18-rank-card-support .try18-rank-badge {
	background: #eef7e7;
	color: #668543;
}

.try18-formwrap .try18-rank-fee-label {
	margin: 0 0 1px;
	color: #70858d;
	font-size: 12px;
	font-weight: 500;
}

.try18-formwrap .try18-rank-fee {
	margin: 0 0 8px;
	color: #08708a;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

.try18-formwrap .try18-rank-description {
	margin: 0;
	color: #536a72;
	font-size: 13px;
	line-height: 1.75;
}

.try18-formwrap .try18-rank-bottom-note {
	margin-top: 18px;
	padding: 15px 17px;
	background: #f0f8fb;
	border-left: 4px solid #08708a;
	border-radius: 8px;
	color: #405b64;
	font-size: 13px;
	line-height: 1.7;
}

.try18-formwrap .try18-rank-bottom-note p {
	margin: 0;
}

.try18-formwrap .try18-rank-bottom-note p + p {
	margin-top: 4px;
}

.try18-formwrap .try18-rank-card:has(input[type="checkbox"]:checked) {
	background: #f3fafc;
	border-color: #08708a;
	box-shadow: 0 0 0 2px rgba(8, 112, 138, 0.1);
}

.try18-formwrap .try18-rank-card:has(input[type="checkbox"]:checked) .try18-rank-icon {
	border-color: #87c2d0;
	box-shadow: 0 0 0 3px rgba(8, 112, 138, 0.1), 0 5px 14px rgba(18, 49, 58, 0.1);
}

/* ---------- 保証時間の説明 ---------- */

.try18-formwrap .try18-guarantee-guide {
	margin: 10px 0 16px;
	padding: 17px 18px;
	background: #fff9ec;
	border: 1px solid #ead39b;
	border-left: 5px solid #d79b24;
	border-radius: 12px;
	color: #4d432f;
	font-size: 14px;
	line-height: 1.8;
}

.try18-formwrap .try18-guarantee-guide p {
	margin: 0;
}

.try18-formwrap .try18-guarantee-guide p + p {
	margin-top: 5px;
}

.try18-formwrap .try18-guide-title {
	color: #765313;
	font-size: 15px;
	font-weight: 700;
}

.try18-formwrap .try18-guarantee-example {
	margin-top: 12px;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid #eadfca;
	border-radius: 9px;
}

.try18-formwrap .try18-guarantee-example p {
	margin: 0;
}

.try18-formwrap .try18-guarantee-example p + p {
	margin-top: 4px;
}

/* ---------- ヘアメイク派遣の契約注意 ---------- */

.try18-formwrap .try18-contract-notice {
	margin: 0 0 24px;
	padding: 17px 19px;
	background: #fff5f3;
	border: 1px solid #ebc8c2;
	border-left: 5px solid #ce5549;
	border-radius: 10px;
	color: #5f3732;
	font-size: 14px;
	line-height: 1.8;
}

.try18-formwrap .try18-contract-notice p {
	margin: 0;
}

.try18-formwrap .try18-contract-notice p + p {
	margin-top: 5px;
}

.try18-formwrap .try18-contract-notice-title {
	color: #a33e34;
	font-size: 15px;
	font-weight: 700;
}

/* ===============================
送り設定：距離別料金
=============================== */

.try18-formwrap .try18-distance-delivery-box {
	padding: 22px;
}

.try18-formwrap .try18-distance-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.try18-formwrap .try18-distance-title {
	margin: 0;
	color: #12313a;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.try18-formwrap .try18-distance-lead {
	margin: 4px 0 0;
	color: #70858d;
	font-size: 13px;
	line-height: 1.7;
}

.try18-formwrap .try18-distance-note {
	flex-shrink: 0;
	display: inline-block;
	padding: 5px 11px;
	background: #e8f5f8;
	color: #08708a;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.try18-formwrap .try18-distance-guide {
	margin-bottom: 20px;
	padding: 16px 18px;
	background: #f0f8fb;
	border-left: 5px solid #08708a;
	border-radius: 10px;
	color: #405b64;
	font-size: 13px;
	line-height: 1.8;
}

.try18-formwrap .try18-distance-guide p {
	margin: 0;
}

.try18-formwrap .try18-distance-guide p + p {
	margin-top: 4px;
}

.try18-formwrap .try18-distance-guide strong {
	color: #12313a;
}

.try18-formwrap .try18-distance-table {
	display: grid;
	gap: 14px;
}

.try18-formwrap .try18-distance-row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 18px;
	background: #fff;
	border: 1px solid #d8e6ea;
	border-radius: 13px;
	box-shadow: 0 3px 10px rgba(18, 49, 58, 0.035);
}

.try18-formwrap .try18-distance-row-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: 1px;
	background: #08708a;
	color: #fff;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
}

.try18-formwrap .try18-distance-row-main {
	min-width: 0;
}

.try18-formwrap .try18-distance-row-title {
	margin: 0 0 12px;
	color: #12313a;
	font-size: 15px;
	font-weight: 700;
}

.try18-formwrap .try18-distance-fields {
	display: grid;
	grid-template-columns: minmax(150px, 1fr) 24px minmax(150px, 1fr) minmax(180px, 1.1fr);
	gap: 12px;
	align-items: end;
}

.try18-formwrap .try18-distance-field {
	min-width: 0;
}

.try18-formwrap .try18-distance-field > label {
	display: block;
	margin: 0 0 7px;
	color: #617780;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.try18-formwrap .try18-distance-separator {
	align-self: end;
	padding-bottom: 13px;
	color: #7b9097;
	font-size: 17px;
	text-align: center;
}

.try18-formwrap .try18-unit-input {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.try18-formwrap .try18-unit-input input {
	width: 100%;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 10px 12px;
	background: #fbfdfe;
	text-align: right;
}

.try18-formwrap .try18-unit-input > span {
	flex-shrink: 0;
	color: #12313a;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.try18-formwrap .try18-distance-fee-field {
	padding-left: 12px;
	border-left: 1px solid #e0eaed;
}

.try18-formwrap .try18-distance-example {
	margin: 11px 0 0;
	color: #7a8d94;
	font-size: 12px;
	line-height: 1.6;
}

.try18-formwrap .try18-distance-additional {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #dce8eb;
}

/* ===============================
会員画面の表示イメージ
=============================== */

.try18-formwrap .try18-member-preview {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid #dce8eb;
}

.try18-formwrap .try18-member-preview-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 13px;
}

.try18-formwrap .try18-member-preview-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: #e8f5f8;
	border-radius: 50%;
	font-size: 21px;
}

.try18-formwrap .try18-member-preview-title {
	margin: 0;
	color: #12313a;
	font-size: 16px;
	font-weight: 700;
}

.try18-formwrap .try18-member-preview-subtitle {
	margin: 3px 0 0;
	color: #70858d;
	font-size: 12px;
	line-height: 1.6;
}

.try18-formwrap .try18-member-preview-screen {
	max-width: 500px;
	padding: 18px;
	background: #fff;
	border: 1px solid #d8e5e9;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(18, 49, 58, 0.06);
}

.try18-formwrap .try18-member-preview-label {
	margin: 0 0 12px;
	padding-bottom: 10px;
	color: #12313a;
	border-bottom: 1px solid #e2ebee;
	font-size: 15px;
	font-weight: 700;
}

.try18-formwrap .try18-member-preview-list {
	display: grid;
	gap: 0;
}

.try18-formwrap .try18-member-preview-list > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px dashed #dce7ea;
}

.try18-formwrap .try18-member-preview-list > div:last-child {
	border-bottom: none;
}

.try18-formwrap .try18-member-preview-list span {
	color: #536a72;
	font-size: 13px;
}

.try18-formwrap .try18-member-preview-list strong {
	flex-shrink: 0;
	color: #08708a;
	font-size: 14px;
}

.try18-formwrap .try18-member-preview-caption {
	margin: 12px 0 0;
	padding-top: 10px;
	color: #82949a;
	border-top: 1px solid #e2ebee;
	font-size: 11px;
	line-height: 1.6;
}

/* ===================================================================
ステップナビゲーション
=================================================================== */

.try18-formwrap .try18-step-navigation {
	position: sticky;
	top: 0; /* JS(updateExternalFixedHeaderOffset)がSWELL固定ヘッダー／
	            WP管理者バーの高さに応じて都度inlineで上書きする。 */
	z-index: 50;
	max-width: 860px;
	margin: 0 auto 16px;
	padding: 12px 14px 10px;
	background: rgba(255, 255, 255, 0.98);
	border-bottom: 1px solid #dce8eb;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 3px 10px rgba(18, 49, 58, 0.06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.try18-formwrap .try18-step-status {
	margin: 0 0 10px;
}

.try18-formwrap .try18-step-status p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	color: #71868d;
	font-size: 12px;
	line-height: 1.4;
}

.try18-formwrap .try18-step-status strong {
	color: #08708a;
	font-size: 13px;
}

.try18-formwrap .try18-step-percent {
	margin-left: auto;
	padding: 3px 10px;
	background: #eef7f9;
	border-radius: 999px;
	color: #08708a;
	font-size: 11px;
	font-weight: 700;
}

.try18-formwrap .try18-progress-track {
	position: relative;
	width: 100%;
	height: 6px;
	margin-top: 8px;
	background: #e2ebee;
	border-radius: 999px;
	overflow: hidden;
}

.try18-formwrap .try18-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #08708a, #0aa0c2);
	border-radius: 999px;
	transition: width 0.3s ease;
}

/* ---------- ステップ一覧 ---------- */

.try18-formwrap .try18-step-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 2px 0 0;
}

.try18-formwrap .try18-step-list::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: #e2ebee;
	z-index: 0;
}

.try18-formwrap .try18-step-item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 2px 1px;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: #7c9097;
	line-height: 1;
	box-shadow: none;
}

.try18-formwrap .try18-step-item:disabled,
.try18-formwrap .try18-step-item.is-locked {
	cursor: not-allowed;
}

.try18-formwrap .try18-step-item:not(.is-locked):hover,
.try18-formwrap .try18-step-item:not(.is-locked):focus-visible {
	background: transparent;
	color: #08708a;
	outline: none;
}

.try18-formwrap .try18-step-number {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	background: #e7eff2;
	color: #748990;
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}

.try18-formwrap .try18-step-label {
	display: block;
	width: 100%;
	overflow: hidden;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.try18-formwrap .try18-step-label-sp {
	display: none;
}

.try18-formwrap .try18-step-item.is-active {
	color: #08708a;
}

.try18-formwrap .try18-step-item.is-active .try18-step-number {
	background: #08708a;
	color: #fff;
}

.try18-formwrap .try18-step-item.is-completed {
	color: #527780;
}

.try18-formwrap .try18-step-item.is-completed .try18-step-number {
	background: #cce7ec;
	color: #076179;
}

.try18-formwrap .try18-step-item.is-completed .try18-step-number::after {
	content: "✓";
}

.try18-formwrap .try18-step-item.is-locked {
	color: #b7c3c8;
}

.try18-formwrap .try18-step-item.is-locked .try18-step-number {
	background: #eef2f4;
	color: #b7c3c8;
}

/* ===================================================================
ステップパネル
=================================================================== */

.try18-formwrap .try18-form {
	margin: 0;
}

.try18-formwrap .try18-step-panels {
	position: relative;
}

.try18-formwrap .try18-step-panel {
	animation: try18-fade-in 0.25s ease;
}

/* 【重要／Phase1不具合の再発防止】ステップパネルの非表示も
   [hidden] 属性依存であるため、明示的に上書きしておく。 */
.try18-formwrap .try18-step-panel[hidden] {
	display: none !important;
}

@keyframes try18-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- ステップ操作（戻る／次へ：モバイル固定ボタンを含む） ---------- */

.try18-formwrap .try18-step-actions {
	position: sticky;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 28px -14px 0;
	padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.97);
	border-top: 1px solid #dce8eb;
	box-shadow: 0 -4px 14px rgba(18, 49, 58, 0.06);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.try18-formwrap .try18-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 120px;
	padding: 13px 24px;
	border: none;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.18s ease, transform 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.try18-formwrap .try18-btn:active {
	transform: translateY(1px);
}

.try18-formwrap .try18-btn-next,
.try18-formwrap .try18-btn-submit {
	margin-left: auto;
	background: linear-gradient(135deg, #063d4d, #08708a);
	color: #fff;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.try18-formwrap .try18-btn-next:hover,
.try18-formwrap .try18-btn-submit:hover {
	opacity: 0.9;
}

.try18-formwrap .try18-btn-next:disabled,
.try18-formwrap .try18-btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.try18-formwrap .try18-btn-back {
	background: #eef2f4;
	color: #4c5f66;
}

.try18-formwrap .try18-btn-back:hover {
	background: #e2eaed;
}

.try18-formwrap .try18-btn-back:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.try18-formwrap .try18-btn-restart {
	margin-top: 24px;
	background: #eef2f4;
	color: #4c5f66;
}

/* ===================================================================
入力確認画面（STEP1〜7完了後の独立画面・JS生成）
=================================================================== */

.try18-formwrap .try18-confirm {
	display: grid;
	gap: 16px;
	margin-bottom: 24px;
}

.try18-formwrap .try18-confirm-step {
	padding: 20px 22px;
	background: #fff;
	border: 1px solid #dce8eb;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.try18-formwrap .try18-confirm-step-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e4edef;
}

.try18-formwrap .try18-confirm-step-title {
	margin: 0;
	color: #08708a;
	font-size: 15px;
	font-weight: 700;
}

.try18-formwrap .try18-confirm-edit-btn {
	flex-shrink: 0;
	padding: 7px 16px;
	background: #eef7f9;
	border: 1px solid #bfdfe6;
	border-radius: 999px;
	color: #08708a;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	min-height: 36px;
}

.try18-formwrap .try18-confirm-edit-btn:hover {
	background: #dff0f4;
}

.try18-formwrap .try18-confirm-table {
	display: grid;
	gap: 10px;
}

.try18-formwrap .try18-confirm-row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px dashed #eaf0f2;
}

.try18-formwrap .try18-confirm-row:last-child {
	border-bottom: none;
}

.try18-formwrap .try18-confirm-label {
	color: #70858d;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
}

.try18-formwrap .try18-confirm-value {
	color: #1f2d33;
	font-size: 14px;
	line-height: 1.7;
	word-break: break-word;
	white-space: pre-line;
}

.try18-formwrap .try18-confirm-empty {
	padding: 10px 0;
	color: #9aabb0;
	font-size: 13px;
}

/* ---------- 最終ガイド ---------- */

.try18-formwrap .try18-final-guide {
	margin-bottom: 20px;
	padding: 18px 20px;
	background: #f0f8fb;
	border-left: 5px solid #08708a;
	border-radius: 10px;
	color: #405b64;
	font-size: 14px;
	line-height: 1.8;
}

.try18-formwrap .try18-final-guide p {
	margin: 0;
}

.try18-formwrap .try18-final-guide p + p {
	margin-top: 5px;
}

/* ---------- 確認フェーズ用バッジ ---------- */

.try18-formwrap .try18-confirm-phase-badge {
	padding: 3px 10px;
	background: #fff3d6;
	border-radius: 999px;
	color: #8a5a08;
	font-size: 11px;
	font-weight: 700;
}

/* ---------- 確認専用画面（STEP1〜7とは独立） ---------- */

.try18-formwrap .try18-confirm-screen {
	animation: try18-fade-in 0.25s ease;
}

.try18-formwrap .try18-confirm-screen[hidden] {
	display: none !important;
}

/* ===================================================================
送信直前の最終確認モーダル
=================================================================== */

.try18-final-confirm-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 30, 36, 0.55);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 【重要】Phase1で発見・修正済みの不具合の再発防止コメント：
   .try18-final-confirm-overlay に display:flex を無条件指定しているため、
   JS側で hidden 属性をtrueにしても、通常セレクタのdisplay:flexが
   [hidden]のUAスタイル（display:none）より優先されてしまい、
   モーダルが見た目上消えないという不具合が発生した実績がある。
   [hidden]属性セレクタを明示的に指定し、確実に非表示化する。
   このセレクタは本番環境でも絶対に削除しないこと。 */
.try18-final-confirm-overlay[hidden] {
	display: none !important;
}

body.try18-modal-open {
	overflow: hidden;
}

.try18-final-confirm-panel {
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	margin: auto;
	padding: 26px 24px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
	animation: try18-fade-in 0.2s ease;
}

.try18-final-confirm-body {
	margin-bottom: 22px;
}

.try18-final-confirm-title {
	margin: 0 0 12px;
	color: #12313a;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.try18-final-confirm-text {
	margin: 0;
	color: #405b64;
	font-size: 13.5px;
	line-height: 1.9;
}

.try18-final-confirm-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.try18-final-confirm-actions .try18-btn {
	width: 100%;
	margin-left: 0;
}

.try18-final-confirm-actions .try18-btn-submit:disabled,
.try18-final-confirm-actions .try18-btn-back:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* CF7の [submit] タグはinput[type=submit]として出力されるため、
   ボタン内テキストの表示は value属性依存になる。
   「送信中…」への文言変更はJS側で input.value を書き換えて対応する
   （wordpress-form-script.js 側で対応済み）。 */
.try18-final-confirm-actions input.try18-btn-submit[type="submit"] {
	width: 100%;
	margin-left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ===================================================================
送信完了画面
=================================================================== */

.try18-complete-screen {
	max-width: 560px;
	margin: 60px auto;
	padding: 48px 32px;
	background: #fff;
	border: 1px solid #dce8eb;
	border-radius: 20px;
	box-shadow: 0 12px 30px rgba(18, 49, 58, 0.08);
	text-align: center;
}

.try18-complete-screen[hidden] {
	display: none !important;
}

.try18-complete-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, #063d4d, #08708a);
	color: #fff;
	border-radius: 50%;
	font-size: 34px;
	font-weight: 700;
}

.try18-complete-title {
	margin: 0 0 14px;
	color: #12313a;
	font-size: 22px;
	font-weight: 700;
}

.try18-complete-text {
	margin: 0;
	color: #405b64;
	font-size: 15px;
	line-height: 1.9;
}

.try18-complete-note {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 14px;
	background: #fff9ec;
	border: 1px solid #ead39b;
	border-radius: 8px;
	color: #765313;
	font-size: 12.5px;
	font-weight: 700;
}

.try18-complete-restart-note {
	margin: 14px 0 0;
	color: #6d8189;
	font-size: 13px;
	line-height: 1.8;
}

/* ===============================
カード内の余白調整
=============================== */

.try18-formwrap .try18-field-card > .try18-field-row:last-child {
	margin-bottom: 0;
}

/* ===================================================================
レスポンシブ：タブレット
=================================================================== */

@media screen and (max-width: 800px) {
	.try18-formwrap .try18-distance-fields {
		grid-template-columns: minmax(120px, 1fr) 20px minmax(120px, 1fr);
	}

	.try18-formwrap .try18-distance-fee-field {
		grid-column: 1 / -1;
		margin-top: 2px;
		padding: 13px 0 0;
		border-top: 1px dashed #dce8eb;
		border-left: none;
	}

	.try18-formwrap .try18-distance-fee-field .try18-unit-input {
		max-width: 240px;
	}

	.try18-formwrap .try18-confirm-row {
		grid-template-columns: 130px minmax(0, 1fr);
	}
}

/* ===================================================================
レスポンシブ：スマホ（モバイルファースト強化・優先表示環境）
=================================================================== */

@media screen and (max-width: 600px) {
	.try18-formwrap .try18-section-title {
		margin-bottom: 20px;
		padding: 16px 18px;
		font-size: 19px;
	}

	.try18-formwrap .try18-info-box {
		padding: 16px;
	}

	.try18-formwrap .try18-field-card {
		margin-bottom: 20px;
		padding: 20px 16px;
	}

	.try18-formwrap .try18-label-text {
		font-size: 15px;
	}

	.try18-formwrap .try18-note {
		margin-bottom: 8px;
		font-size: 13px;
	}

	.try18-formwrap .try18-field-control input,
	.try18-formwrap .try18-field-control select,
	.try18-formwrap .try18-field-control textarea {
		font-size: 15px;
	}

	.try18-formwrap .try18-inner-fields {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.try18-formwrap .wpcf7-list-item {
		display: block;
		margin: 8px 0;
	}

	.try18-formwrap .wpcf7-list-item label {
		width: 100%;
		box-sizing: border-box;
		justify-content: flex-start;
	}

	.try18-formwrap .wpcf7-list-item input[type="checkbox"] {
		flex-shrink: 0;
	}

	/* ---------- ランクカード ---------- */

	.try18-formwrap .try18-rank-field-card {
		padding: 18px 15px;
	}

	.try18-formwrap .try18-rank-heading {
		align-items: flex-start;
		margin-bottom: 15px;
	}

	.try18-formwrap .try18-rank-heading-title {
		font-size: 15px;
		line-height: 1.6;
	}

	.try18-formwrap .try18-rank-card {
		padding: 16px 14px;
	}

	.try18-formwrap .try18-rank-card-body {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 13px;
	}

	.try18-formwrap .try18-rank-icon {
		width: 72px;
		height: 72px;
	}

	.try18-formwrap .try18-rank-name {
		font-size: 16px;
	}

	.try18-formwrap .try18-rank-fee {
		font-size: 22px;
	}

	.try18-formwrap .try18-rank-description {
		font-size: 13px;
		line-height: 1.7;
	}

	.try18-formwrap .try18-rank-recommend {
		padding: 4px 11px;
		font-size: 11px;
	}

	.try18-formwrap .try18-rank-title-row {
		align-items: flex-start;
	}

	.try18-formwrap .try18-rank-badge {
		white-space: normal;
		line-height: 1.4;
	}

	/* ---------- 保証時間・契約注意 ---------- */

	.try18-formwrap .try18-guarantee-guide,
	.try18-formwrap .try18-contract-notice {
		padding: 15px;
		font-size: 13px;
	}

	.try18-formwrap .try18-guarantee-example {
		padding: 12px 13px;
	}

	.try18-formwrap .try18-guide-title,
	.try18-formwrap .try18-contract-notice-title {
		font-size: 14px;
	}

	/* ---------- 送り設定 ---------- */

	.try18-formwrap .try18-distance-delivery-box {
		padding: 17px 14px;
	}

	.try18-formwrap .try18-distance-heading {
		flex-direction: column;
		gap: 8px;
	}

	.try18-formwrap .try18-distance-title {
		font-size: 16px;
	}

	.try18-formwrap .try18-distance-lead {
		font-size: 12px;
	}

	.try18-formwrap .try18-distance-guide {
		padding: 14px;
		font-size: 13px;
	}

	.try18-formwrap .try18-distance-row {
		grid-template-columns: 30px minmax(0, 1fr);
		gap: 10px;
		padding: 15px 13px;
	}

	.try18-formwrap .try18-distance-row-number {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.try18-formwrap .try18-distance-row-title {
		margin-bottom: 11px;
		font-size: 14px;
	}

	.try18-formwrap .try18-distance-fields {
		grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
		gap: 7px;
	}

	.try18-formwrap .try18-distance-field > label {
		margin-bottom: 6px;
		font-size: 11px;
	}

	.try18-formwrap .try18-distance-separator {
		padding-bottom: 13px;
		font-size: 15px;
	}

	.try18-formwrap .try18-unit-input {
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
	}

	.try18-formwrap .try18-unit-input input {
		height: 44px;
		padding: 9px 10px;
		text-align: center;
	}

	.try18-formwrap .try18-unit-input > span {
		font-size: 11px;
		text-align: center;
	}

	.try18-formwrap .try18-distance-fee-field {
		grid-column: 1 / -1;
		margin-top: 5px;
		padding-top: 13px;
	}

	.try18-formwrap .try18-distance-fee-field .try18-unit-input {
		display: grid;
		grid-template-columns: minmax(0, 150px) auto;
		align-items: center;
		max-width: none;
		justify-content: start;
	}

	.try18-formwrap .try18-distance-fee-field .try18-unit-input > span {
		font-size: 13px;
		text-align: left;
	}

	.try18-formwrap .try18-distance-example {
		margin-top: 10px;
		font-size: 11px;
	}

	.try18-formwrap .try18-member-preview-screen {
		padding: 15px;
	}

	.try18-formwrap .try18-member-preview-list > div {
		gap: 10px;
		padding: 9px 0;
	}

	.try18-formwrap .try18-member-preview-list span {
		font-size: 12px;
	}

	.try18-formwrap .try18-member-preview-list strong {
		font-size: 13px;
	}

	/* ---------- ステップナビ（スマホ：圧迫感を抑える） ---------- */

	.try18-formwrap .try18-step-navigation {
		margin: 0 -10px 12px;
		padding: 8px 10px 7px;
		border-radius: 0 0 12px 12px;
	}

	.try18-formwrap .try18-step-status {
		margin-bottom: 6px;
	}

	.try18-formwrap .try18-step-status p {
		font-size: 10px;
	}

	.try18-formwrap .try18-step-status strong {
		font-size: 11px;
	}

	.try18-formwrap .try18-step-percent {
		font-size: 10px;
		padding: 2px 8px;
	}

	.try18-formwrap .try18-step-list {
		padding-top: 1px;
	}

	.try18-formwrap .try18-step-list::before {
		top: 11px;
		left: 7%;
		right: 7%;
	}

	.try18-formwrap .try18-step-item {
		gap: 2px;
		min-height: 38px;
		padding: 2px 0;
	}

	.try18-formwrap .try18-step-number {
		width: 20px;
		height: 20px;
		font-size: 9px;
	}

	.try18-formwrap .try18-step-label {
		font-size: 8px;
		line-height: 1.15;
	}

	/* ---------- クイック選択ボタン・エリア選択（スマホ） ---------- */

	.try18-formwrap .try18-quick-options {
		gap: 6px;
	}

	.try18-formwrap .try18-quick-btn {
		min-height: 40px;
		padding: 7px 12px;
		font-size: 12.5px;
	}

	.try18-formwrap .try18-area-summary {
		padding: 13px 14px;
	}

	.try18-formwrap .try18-area-group-controls {
		gap: 6px;
	}

	.try18-formwrap .try18-area-select-all-btn,
	.try18-formwrap .try18-area-deselect-all-btn {
		flex: 1;
		min-height: 40px;
	}

	.try18-formwrap .try18-area-count-badge {
		font-size: 10.5px;
		padding: 3px 9px;
	}

	.try18-formwrap .try18-distance-row-error,
	.try18-formwrap p.try18-error-message[data-error-for-group] {
		font-size: 12px;
	}

	.try18-formwrap .try18-step-label-pc {
		display: none;
	}

	.try18-formwrap .try18-step-label-sp {
		display: inline;
	}

	/* ---------- 戻る／次へ（画面下部固定・タップしやすく） ---------- */

	.try18-formwrap .try18-step-actions {
		margin: 24px -10px 0;
		padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
	}

	.try18-formwrap .try18-btn {
		min-height: 50px;
		min-width: 0;
		flex: 1;
		padding: 13px 18px;
		font-size: 15px;
	}

	.try18-formwrap .try18-btn-next,
	.try18-formwrap .try18-btn-submit {
		flex: 1.4;
	}

	/* ---------- 確認画面 ---------- */

	.try18-formwrap .try18-confirm-step {
		padding: 16px;
	}

	.try18-formwrap .try18-confirm-step-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.try18-formwrap .try18-confirm-edit-btn {
		align-self: flex-end;
	}

	.try18-formwrap .try18-confirm-row {
		grid-template-columns: 1fr;
		gap: 3px;
	}

	.try18-complete-screen {
		margin: 30px auto;
		padding: 36px 20px;
	}

	/* ---------- 最終確認モーダル（スマホ：はみ出し防止） ---------- */

	.try18-final-confirm-overlay {
		padding: 12px;
		align-items: flex-end;
	}

	.try18-final-confirm-panel {
		max-width: 100%;
		max-height: calc(100vh - 24px);
		padding: 22px 18px;
		border-radius: 16px 16px 0 0;
	}

	.try18-final-confirm-title {
		font-size: 16.5px;
	}

	.try18-final-confirm-text {
		font-size: 13px;
	}
}

/* ===================================================================
レスポンシブ：狭いスマホ
=================================================================== */

@media screen and (max-width: 380px) {
	.try18-formwrap .try18-rank-card-body {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 11px;
	}

	.try18-formwrap .try18-rank-icon {
		width: 64px;
		height: 64px;
	}

	.try18-formwrap .try18-rank-title-row {
		gap: 6px;
	}

	.try18-formwrap .try18-rank-name {
		font-size: 15px;
	}

	.try18-formwrap .try18-rank-badge {
		padding: 3px 7px;
		font-size: 10px;
	}

	.try18-formwrap .try18-rank-fee {
		font-size: 21px;
	}

	.try18-formwrap .try18-distance-row {
		grid-template-columns: 1fr;
	}

	.try18-formwrap .try18-distance-row-number {
		margin-bottom: -2px;
	}

	.try18-formwrap .try18-distance-fields {
		grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
	}

	.try18-formwrap .try18-member-preview-list > div {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	.try18-formwrap .try18-step-label {
		font-size: 8px;
	}

	.try18-formwrap .try18-btn {
		font-size: 14px;
		padding: 12px 14px;
	}
}

/* ===================================================================
TRY18 ステップヘッダー UI改善
=================================================================== */

.try18-formwrap .try18-step-status-main {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
}

.try18-formwrap .try18-step-status-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.try18-formwrap .try18-step-status-kicker {
	color: #6f838b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.try18-formwrap .try18-step-status-heading {
	color: #08708a;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
}

.try18-formwrap .try18-current-step-title {
	color: #12313a;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.try18-formwrap .try18-step-status-meta {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	gap: 5px;
	flex-shrink: 0;
}

.try18-formwrap .try18-remaining-step {
	color: #6f838b;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.try18-formwrap .try18-step-label-pc,
.try18-formwrap .try18-step-label-sp {
	line-height: 1.45;
}

.try18-formwrap .try18-step-item {
	min-width: 0;
}

@media (max-width: 767px) {
	.try18-formwrap .try18-step-status-main {
		align-items: flex-start;
		gap: 10px;
	}

	.try18-formwrap .try18-step-status-heading {
		font-size: 16px;
	}

	.try18-formwrap .try18-current-step-title {
		font-size: 12.5px;
	}

	.try18-formwrap .try18-step-status-meta {
		gap: 4px;
	}

	.try18-formwrap .try18-step-label-pc {
		display: none !important;
	}

	.try18-formwrap .try18-step-label-sp {
		display: inline !important;
		font-size: 10px;
	}

	.try18-formwrap .try18-step-number {
		margin-bottom: 5px;
	}
}

@media (min-width: 768px) {
	.try18-formwrap .try18-step-label-pc {
		display: inline !important;
	}

	.try18-formwrap .try18-step-label-sp {
		display: none !important;
	}
}

/* ===================================================================
TRY18 6STEP化 最終調整
=================================================================== */

.try18-formwrap .try18-step-list {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.try18-formwrap .try18-hairmake-dispatch-box {
	margin-top: 32px;
}

.try18-formwrap .try18-hairmake-dispatch-box[hidden] {
	display: none !important;
}

/* ===================================================================
TRY18 確認画面・最終送信ボタン 最終調整
=================================================================== */

.try18-formwrap .try18-final-confirm-actions #try18-final-confirm-ok {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 14px 24px !important;
	box-sizing: border-box !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, #063d4d, #08708a) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16) !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.try18-formwrap .try18-final-confirm-actions #try18-final-confirm-ok:hover {
	opacity: 0.9;
}

.try18-formwrap .try18-final-confirm-actions #try18-final-confirm-ok:disabled {
	opacity: 0.6;
	cursor: not-allowed !important;
}

.try18-formwrap .try18-final-confirm-actions #try18-final-confirm-cancel {
	width: 100% !important;
	min-height: 52px;
	margin: 0 !important;
}

/* ===================================================================
TRY18 選択肢カード UI改善
・カードのどこを押しても選択可能
・選択中の背景／枠／影を明確化
・短い選択肢の不要な固定幅を解消
=================================================================== */

.try18-formwrap .try18-checkbox-group .wpcf7-list-item {
	width: auto;
	max-width: 100%;
	vertical-align: top;
}

.try18-formwrap .try18-checkbox-group .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: auto;
	max-width: 100%;
	min-width: 0;
	min-height: 52px;
	padding: 12px 16px;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		box-shadow 0.18s ease, color 0.18s ease, transform 0.08s ease;
}

.try18-formwrap .try18-checkbox-group .wpcf7-list-item label:active {
	transform: scale(0.99);
}

.try18-formwrap .try18-checkbox-group .wpcf7-list-item-label {
	display: block;
	min-width: 0;
	line-height: 1.55;
	cursor: pointer;
}

.try18-formwrap .try18-checkbox-group input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	transform: none;
	cursor: pointer;
	accent-color: #08708a;
}

.try18-formwrap .try18-checkbox-group .wpcf7-list-item label:has(input[type="checkbox"]:checked) {
	background: #eef8fa;
	border-color: #08708a;
	color: #064f62;
	box-shadow: 0 0 0 2px rgba(8, 112, 138, 0.1),
		0 5px 14px rgba(18, 49, 58, 0.06);
}

.try18-formwrap .try18-checkbox-group .wpcf7-list-item label:has(input[type="checkbox"]:focus-visible) {
	outline: 3px solid rgba(8, 112, 138, 0.18);
	outline-offset: 2px;
}

/* ランク選択は専用カードデザインを維持 */
.try18-formwrap .try18-rank-check .wpcf7-list-item label {
	min-height: auto;
	padding: 0;
	box-shadow: none;
	transform: none;
}

/* スマホでは見えているカード全面をタップ領域にする */
@media screen and (max-width: 600px) {
	.try18-formwrap .try18-checkbox-group .wpcf7-list-item {
		display: block;
		width: 100%;
		margin: 8px 0;
	}

	.try18-formwrap .try18-checkbox-group .wpcf7-list-item label {
		display: flex;
		width: 100%;
		min-height: 56px;
		padding: 13px 16px;
	}

	.try18-formwrap .try18-rank-check .wpcf7-list-item {
		width: auto;
		margin: 0;
	}

	.try18-formwrap .try18-rank-check .wpcf7-list-item label {
		width: auto;
		min-height: auto;
		padding: 0;
	}
}


/* ===================================================================
   Ver.8.0 全STEP必須エラー：赤枠パルス演出
   ※確認画面・自動保存・ヘッダー等のデザインには影響しません
=================================================================== */

.try18-formwrap .try18-validation-focus {
	position: relative;
	z-index: 2;
	animation: try18-validation-focus-pulse-v715 0.82s ease-in-out 2;
}

@keyframes try18-validation-focus-pulse-v715 {
	0%,
	100% {
		box-shadow:
			0 0 0 1px rgba(217, 67, 67, 0.82),
			0 0 0 0 rgba(217, 67, 67, 0);
	}
	45% {
		box-shadow:
			0 0 0 2px rgba(217, 67, 67, 0.98),
			0 0 0 10px rgba(217, 67, 67, 0.20);
	}
}

@media (prefers-reduced-motion: reduce) {
	.try18-formwrap .try18-validation-focus {
		animation: none;
		box-shadow: 0 0 0 2px rgba(217, 67, 67, 0.68);
	}
}


/* ===================================================================
   Ver.8.0.2 全STEP共通：バリデーション時のスクロール位置補助
=================================================================== */

.try18-formwrap .try18-field-row,
.try18-formwrap [data-atleastone-group],
.try18-formwrap .try18-distance-row {
	scroll-margin-top: 180px;
	scroll-margin-bottom: 120px;
}


/* ===================================================================
   Ver.8.0.3 STEP切替時：表示中STEPの先頭位置補助
=================================================================== */

.try18-formwrap .try18-step-panel > .try18-section-title,
.try18-formwrap .try18-hairmake-dispatch-box > .try18-section-title {
	scroll-margin-top: 180px;
}


/* ===================================================================
   Ver.8.0.5 CF7送信時エラー：該当STEP内での案内・赤枠強調
=================================================================== */

.try18-formwrap .try18-cf7-step-error-summary {
	margin: 0 0 16px;
	padding: 14px 16px;
	background: #fff3f3;
	border: 1px solid #ef9a9a;
	border-left: 4px solid #d94343;
	border-radius: 10px;
	color: #7f2525;
	line-height: 1.7;
}

.try18-formwrap .try18-cf7-step-error-summary strong {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
}

.try18-formwrap .try18-cf7-step-error-summary p {
	margin: 0;
	font-size: 13px;
}

.try18-formwrap .try18-field-row.has-error,
.try18-formwrap [data-atleastone-group].has-error,
.try18-formwrap .try18-distance-row.has-error {
	border-color: #d94343 !important;
	background: #fffafa !important;
}

.try18-formwrap .try18-field-row.has-error input,
.try18-formwrap .try18-field-row.has-error select,
.try18-formwrap .try18-field-row.has-error textarea {
	border-color: #d94343 !important;
}

.try18-formwrap .try18-error-message {
	display: block;
	margin: 8px 0 0;
	color: #d94343;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.55;
}


/* ===================================================================
   Ver.8.0.8 送信結果を明確に伝える固定通知
=================================================================== */

.try18-submission-status-notice {
	position: fixed;
	top: max(18px, env(safe-area-inset-top));
	left: 50%;
	z-index: 1000000;
	width: min(92vw, 560px);
	transform: translateX(-50%);
}

.try18-submission-status-notice[hidden] {
	display: none !important;
}

.try18-submission-status-notice__inner {
	display: grid;
	grid-template-columns: 40px 1fr 34px;
	align-items: center;
	gap: 12px;
	padding: 15px 14px;
	background: #fff;
	border: 2px solid #d94343;
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
}

.try18-submission-status-notice__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff0f0;
	color: #d94343;
	font-size: 24px;
	font-weight: 900;
}

.try18-submission-status-notice__icon::before {
	content: "!";
}

.try18-submission-status-notice__title {
	display: block;
	margin-bottom: 2px;
	color: #842626;
	font-size: 16px;
	line-height: 1.4;
}

.try18-submission-status-notice__text {
	margin: 0;
	color: #4e3b3b;
	font-size: 13px;
	line-height: 1.6;
}

.try18-submission-status-notice__close {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #6a6a6a;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.try18-submission-status-notice.is-success .try18-submission-status-notice__inner {
	border-color: #16836f;
}

.try18-submission-status-notice.is-success .try18-submission-status-notice__icon {
	background: #e9f8f4;
	color: #16836f;
}

.try18-submission-status-notice.is-success .try18-submission-status-notice__icon::before {
	content: "✓";
}

.try18-submission-status-notice.is-success .try18-submission-status-notice__title {
	color: #116b5b;
}

.try18-submission-status-notice.is-warning .try18-submission-status-notice__inner {
	border-color: #d18b13;
}

.try18-submission-status-notice.is-warning .try18-submission-status-notice__icon {
	background: #fff5dd;
	color: #b8770d;
}

.try18-submission-status-notice.is-visible {
	animation: try18-submission-status-in 0.3s ease both;
}

@keyframes try18-submission-status-in {
	from {
		opacity: 0;
		transform: translate(-50%, -18px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

@media (max-width: 767px) {
	.try18-submission-status-notice {
		top: max(10px, env(safe-area-inset-top));
		width: calc(100vw - 20px);
	}

	.try18-submission-status-notice__inner {
		grid-template-columns: 36px 1fr 30px;
		padding: 13px 11px;
		border-radius: 12px;
	}

	.try18-submission-status-notice__title {
		font-size: 15px;
	}

	.try18-submission-status-notice__text {
		font-size: 12px;
	}
}


/* ===================================================================
   Ver.8.1 ヘアメイク派遣のみ：重複案内を非表示
   キャスト派遣＋ヘアメイク派遣の併用時は表示を維持
=================================================================== */

.try18-formwrap.is-hairmake-only
.try18-hairmake-dispatch-box > .try18-info-box,
.try18-formwrap.is-hairmake-only
.try18-hairmake-dispatch-box > .try18-contract-notice {
	display: none !important;
}

/* 案内非表示後も、最初の入力カードとの間隔を自然に保つ */
.try18-formwrap.is-hairmake-only
.try18-hairmake-dispatch-box > .try18-field-card:first-of-type {
	margin-top: 0 !important;
}


/* ===================================================================
   Ver.8.2 回答漏れゼロ：「特になし」の明示選択
=================================================================== */

.try18-formwrap .try18-exclusive-none-group
.wpcf7-list-item:has(input[value="特になし"]) label {
	border-style: dashed;
}

.try18-formwrap .try18-exclusive-none-group
.wpcf7-list-item:has(input[value="特になし"]) input:checked + span,
.try18-formwrap .try18-exclusive-none-group
.wpcf7-list-item:has(input[value="特になし"]) label:has(input:checked) {
	font-weight: 700;
}


/* ===================================================================
   Ver.8.4 キャスト派遣：回答漏れゼロ設計
=================================================================== */

.try18-formwrap .try18-required {
	white-space: nowrap;
}

.try18-formwrap .try18-field-row:has(.try18-required)
.try18-note::after {
	content: "";
}

/* 「なし」「指定なし」「該当なし」は明示回答として視認しやすくする */
.try18-formwrap .try18-exclusive-none-group
.wpcf7-list-item:has(input[value="なし"]) label,
.try18-formwrap .try18-exclusive-none-group
.wpcf7-list-item:has(input[value="指定なし"]) label,
.try18-formwrap .try18-exclusive-none-group
.wpcf7-list-item:has(input[value="該当なし"]) label {
	border-style: dashed;
}

/* 任意の補足入力には任意であることを視覚的に補足 */
.try18-formwrap .try18-field-row[data-name="business-hours-special"] .try18-label-text::after,
.try18-formwrap .try18-field-row[data-name="customer-base-notes"] .try18-label-text::after,
.try18-formwrap .try18-field-row[data-name="costume-detail"] .try18-label-text::after,
.try18-formwrap .try18-field-row[data-name="costume-ng-sonota1"] .try18-label-text::after,
.try18-formwrap .try18-field-row[data-name="costume-ng-sonota2"] .try18-label-text::after,
.try18-formwrap .try18-field-row[data-name="shoe-notes"] .try18-label-text::after,
.try18-formwrap .try18-field-row[data-name="stocking-notes"] .try18-label-text::after,
.try18-formwrap .try18-field-row[data-name="delivery-distance-notes"] .try18-label-text::after {
	content: "任意";
	display: inline-flex;
	align-items: center;
	margin-left: 7px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #eef2f3;
	color: #667b81;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
}


/* ===================================================================
   Ver.8.4.2 終電・送り：必須表示と条件別エラーの統一
=================================================================== */

.try18-formwrap .try18-distance-title .try18-required {
	margin-left: 8px;
	vertical-align: middle;
}

.try18-formwrap .try18-distance-row-error {
	grid-column: 1 / -1;
	margin: 0 0 10px;
	padding: 9px 11px;
	border-radius: 8px;
	background: #fff0f0;
	color: #c83838;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}

.try18-formwrap .try18-distance-row.has-error {
	border-color: #dc4b4b !important;
	background: #fffafa !important;
}

.try18-formwrap .try18-distance-row.has-error
input {
	border-color: #dc4b4b !important;
}


/* ===================================================================
   Ver.8.4.3 送り料金UI改善
=================================================================== */

/* 開始距離・終了距離・送り料金の数字を大きく中央表示 */
.try18-formwrap .try18-distance-row
.try18-unit-input input {
	min-height: 58px;
	padding: 12px 10px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* 単位部分も入力欄と視覚的に揃える */
.try18-formwrap .try18-distance-row
.try18-unit-input > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* 入力例を中央揃えで整理 */
.try18-formwrap .try18-distance-row
.try18-distance-row-example,
.try18-formwrap .try18-distance-row
.try18-distance-example {
	margin-top: 8px;
	text-align: center;
	font-size: 12px;
	color: #789097;
}

/* 二重ボックス感を抑えたシンプルな情報パネル */
.try18-formwrap .try18-delivery-distance-guide {
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 12px;
	align-items: flex-start;
	margin: 16px 0 20px;
	padding: 16px 18px;
	border: 1px solid #cfe2e6;
	border-left: 4px solid #0a7d8d;
	border-radius: 10px;
	background: linear-gradient(180deg, #f8fcfd 0%, #f3f9fa 100%);
	box-shadow: none;
}

.try18-formwrap .try18-delivery-distance-guide__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #0a7d8d;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}

.try18-formwrap .try18-delivery-distance-guide__content {
	min-width: 0;
}

.try18-formwrap .try18-delivery-distance-guide__title {
	margin: 0 0 6px;
	color: #16434d;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
}

.try18-formwrap .try18-delivery-distance-guide__text {
	margin: 0;
	color: #47646b;
	font-size: 13px;
	line-height: 1.75;
}

.try18-formwrap .try18-delivery-distance-guide__text span {
	display: block;
	margin-top: 2px;
	color: #6a858b;
	font-size: 12px;
}

/* 料金帯カードの余白を整える */
.try18-formwrap .try18-distance-row {
	padding-top: 18px;
	padding-bottom: 18px;
}

@media (max-width: 767px) {
	.try18-formwrap .try18-distance-row
	.try18-unit-input input {
		min-height: 56px;
		font-size: 17px;
	}

	.try18-formwrap .try18-distance-row
	.try18-unit-input > span {
		min-width: 58px;
		padding: 0 8px;
		font-size: 13px;
	}

	.try18-formwrap .try18-delivery-distance-guide {
		grid-template-columns: 32px 1fr;
		gap: 10px;
		padding: 14px;
	}

	.try18-formwrap .try18-delivery-distance-guide__icon {
		width: 28px;
		height: 28px;
		font-size: 14px;
	}
}


/* ===================================================================
   Ver.9.0 TRY18 SaaS UI 全面刷新
=================================================================== */
:root{
--try18-v9-brand:#08798a;--try18-v9-dark:#075c69;--try18-v9-soft:#eaf7f8;
--try18-v9-ink:#14343e;--try18-v9-muted:#789097;--try18-v9-line:#dbe7ea;
--try18-v9-shadow:0 12px 34px rgba(21,64,75,.08)
}
body:has(.try18-formwrap){background:radial-gradient(circle at 12% 4%,rgba(8,121,138,.055),transparent 29%),linear-gradient(180deg,#f8fbfc 0%,#f5f9fa 100%)}
.try18-formwrap{color:var(--try18-v9-ink);font-feature-settings:"palt"}
.try18-formwrap .try18-form-header,.try18-formwrap .try18-progress-card{border-color:var(--try18-v9-line);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:var(--try18-v9-shadow);backdrop-filter:blur(10px)}
.try18-formwrap .try18-progress-bar{height:7px;border-radius:999px;background:#e6eff1;overflow:hidden}
.try18-formwrap .try18-progress-bar>span,.try18-formwrap .try18-progress-fill{border-radius:999px;background:linear-gradient(90deg,#075c69,#14a4b4)}
.try18-formwrap .try18-step-dot.is-active,.try18-formwrap .try18-progress-step.is-active{transform:scale(1.08);box-shadow:0 0 0 6px rgba(8,121,138,.12)}
.try18-formwrap .try18-section-title,.try18-formwrap .try18-step-title{padding:17px 20px;border-radius:14px;background:linear-gradient(135deg,#075c69,#098697);box-shadow:0 10px 24px rgba(7,92,105,.16)}
.try18-formwrap .try18-field-card,.try18-formwrap .try18-setting-card,.try18-formwrap .try18-profile-preview,.try18-formwrap .try18-confirm-section{border:1px solid var(--try18-v9-line);border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(21,64,75,.055);transition:.2s}
.try18-formwrap .try18-field-card:focus-within,.try18-formwrap .try18-setting-card:focus-within{border-color:rgba(8,121,138,.46);box-shadow:0 0 0 4px rgba(8,121,138,.075),var(--try18-v9-shadow)}
.try18-formwrap .try18-label-text{color:#14343e;font-size:15px;font-weight:800}
.try18-formwrap .try18-note{color:#789097;font-size:12px;line-height:1.7}
.try18-formwrap .try18-required{padding:3px 8px;border:0;border-radius:999px;background:linear-gradient(135deg,#ec5b5b,#d94141);color:#fff;font-size:10px;font-weight:800}
.try18-formwrap input[type=text],.try18-formwrap input[type=email],.try18-formwrap input[type=tel],.try18-formwrap input[type=number],.try18-formwrap input[type=time],.try18-formwrap select,.try18-formwrap textarea{border:1px solid #c9dce0;border-radius:11px;background:#fbfdfe;color:#14343e;transition:.18s}
.try18-formwrap input:focus,.try18-formwrap select:focus,.try18-formwrap textarea:focus{border-color:#08798a;background:#fff;box-shadow:0 0 0 4px rgba(8,121,138,.09);outline:0}
.try18-formwrap .try18-checkbox-group .wpcf7-list-item label,.try18-formwrap .try18-radio-group .wpcf7-list-item label{min-height:56px;border-color:#dbe7ea;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(21,64,75,.025);transition:.16s}
.try18-formwrap .try18-checkbox-group .wpcf7-list-item label:hover,.try18-formwrap .try18-radio-group .wpcf7-list-item label:hover{transform:translateY(-1px);border-color:#a9cdd3;box-shadow:0 7px 18px rgba(21,64,75,.07)}
.try18-formwrap .try18-checkbox-group .wpcf7-list-item label:has(input:checked),.try18-formwrap .try18-radio-group .wpcf7-list-item label:has(input:checked){border-color:#08798a;background:linear-gradient(180deg,#f0fafb,#eaf7f8);box-shadow:0 0 0 2px rgba(8,121,138,.09)}
.try18-formwrap .try18-conditional-box{border:1px solid #dce9eb;border-radius:14px;background:linear-gradient(180deg,#f9fcfd,#f5fafb);box-shadow:inset 3px 0 0 rgba(8,121,138,.32)}
.try18-formwrap .try18-setting-card{position:relative;overflow:hidden}
.try18-formwrap .try18-setting-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#08798a,#27b2bd)}
.try18-formwrap .try18-label-with-icon{display:flex;align-items:center;gap:8px}
.try18-formwrap .try18-label-with-icon:before{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:#eaf7f8;color:#075c69;font-size:16px;font-weight:800}
.try18-formwrap .try18-label-with-icon--train:before{content:"↗"}.try18-formwrap .try18-label-with-icon--clock:before{content:"◷"}.try18-formwrap .try18-label-with-icon--car:before{content:"◆"}
.try18-formwrap .try18-delivery-distance-guide{border-radius:14px;background:linear-gradient(135deg,rgba(234,247,248,.94),rgba(247,252,253,.98))}
.try18-formwrap .try18-distance-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.try18-formwrap .try18-distance-title{margin:0;color:#14343e;font-size:16px;font-weight:850}
.try18-formwrap .try18-distance-lead{margin:4px 0 0;color:#789097;font-size:12px}
.try18-formwrap .try18-distance-note{display:inline-flex;padding:7px 11px;border:1px solid #cfe0e4;border-radius:999px;background:#fff;color:#075c69;font-size:11px;font-weight:800}
.try18-formwrap .try18-distance-table-head{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:10px;padding:0 16px 8px;color:#789097;font-size:11px;font-weight:800;text-align:center}
.try18-formwrap .try18-distance-row{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;margin-bottom:10px;padding:14px 16px;border:1px solid #dbe7ea;border-radius:13px;background:#fff;box-shadow:0 4px 13px rgba(21,64,75,.035)}
.try18-formwrap .try18-distance-row:hover{border-color:#b9d6da;box-shadow:0 8px 20px rgba(21,64,75,.065)}
.try18-formwrap .try18-distance-row-number{width:30px;height:30px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,#08798a,#075c69);color:#fff;font-size:13px;font-weight:800}
.try18-formwrap .try18-distance-row-title{display:none}
.try18-formwrap .try18-distance-fields{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) minmax(0,.9fr);align-items:end;gap:10px}
.try18-formwrap .try18-distance-field label{display:none}
.try18-formwrap .try18-distance-separator{align-self:center;color:#789097;font-size:17px;font-weight:700;text-align:center}
.try18-formwrap .try18-distance-row .try18-unit-input{min-height:54px;border:1px solid #d5e3e6;border-radius:10px;background:#fbfdfe;overflow:hidden}
.try18-formwrap .try18-distance-row .try18-unit-input input{min-height:52px;border:0!important;background:transparent;box-shadow:none!important;color:#075c69;font-size:20px;font-weight:850;text-align:center}
.try18-formwrap .try18-distance-row .try18-unit-input>span{min-width:62px;border-left:1px solid #e0eaec;background:#f3f8f9;color:#39707a;font-size:12px;font-weight:800}
.try18-formwrap .try18-distance-example{margin-top:8px;color:#81969c;font-size:11px;text-align:left}
.try18-formwrap .try18-sticky-actions,.try18-formwrap .try18-bottom-actions{border-top:1px solid rgba(201,220,224,.82);background:rgba(255,255,255,.94);box-shadow:0 -10px 30px rgba(21,64,75,.08);backdrop-filter:blur(14px)}
.try18-formwrap .try18-btn-next,.try18-formwrap .try18-btn-confirm,.try18-formwrap .try18-btn-submit{border-radius:12px;background:linear-gradient(135deg,#075c69,#0791a2);box-shadow:0 9px 20px rgba(7,92,105,.20);font-weight:800}
.try18-formwrap .has-error{background:linear-gradient(180deg,#fffafa,#fff6f6)}
@media(max-width:767px){
.try18-formwrap .try18-distance-table-head{display:none}
.try18-formwrap .try18-distance-row{grid-template-columns:36px minmax(0,1fr);padding:14px 12px}
.try18-formwrap .try18-distance-fields{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:7px}
.try18-formwrap .try18-distance-fee-field{grid-column:1/-1;margin-top:8px}
.try18-formwrap .try18-distance-field label{display:block;margin-bottom:5px;color:#789097;font-size:10px;font-weight:800}
.try18-formwrap .try18-distance-row .try18-unit-input input{font-size:18px}
}


/* ===================================================================
   Ver.9.0.1 条件分岐表示修正
=================================================================== */

/* JavaScriptで強制表示した条件グループを確実に表示する */
.try18-formwrap .is-try18-force-visible {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 非表示グループはレイアウトから完全に除外する */
.try18-formwrap .is-try18-force-hidden {
	display: none !important;
}

/* 条件グループが展開した際の上余白を統一 */
.try18-formwrap .wpcf7cf_group.is-try18-force-visible > .try18-conditional-box,
.try18-formwrap .is-try18-force-visible.try18-conditional-box {
	margin-top: 16px;
}

/* STEP7の設定カード内で条件欄が展開しても切れないようにする */
.try18-formwrap .try18-setting-card {
	overflow: visible;
}


/* ===================================================================
   Ver.9.0.2 条件分岐競合解消
=================================================================== */

/* Conditional Fieldsの後処理より優先して表示を維持 */
.try18-formwrap [data-try18-expected-visible="1"],
.try18-formwrap [data-try18-expected-visible="1"].wpcf7cf-hidden,
.try18-formwrap .is-try18-force-visible {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* 非表示対象は完全に閉じる */
.try18-formwrap [data-try18-expected-visible="0"],
.try18-formwrap .is-try18-force-hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}


/* ===================================================================
   Ver.9.0.3 全条件分岐復旧
=================================================================== */

/* レンタル・ヘアメイクなどの条件欄もSaaSカード内で自然に展開 */
.try18-formwrap [data-group="group-rentaldress"],
.try18-formwrap [data-group="group-rentalshoes"],
.try18-formwrap [data-group="group-hairmakeyes"],
.try18-formwrap [data-group="group-hairmakeno"],
.try18-formwrap [data-group="group-ngcasual"],
.try18-formwrap [data-group="group-groupshop"],
.try18-formwrap [data-group="group-emergency"] {
	margin-top: 16px;
}

/* 開いた条件欄が親カードで切れないよう全条件カードへ適用 */
.try18-formwrap .try18-field-card:has(.wpcf7cf_group),
.try18-formwrap .try18-field-card:has([data-group]) {
	overflow: visible;
}


/* ===================================================================
   Ver.9.0.4 送り入力例の明確化
=================================================================== */

/* 入力済みの数字 */
.try18-formwrap .try18-distance-row
.try18-unit-input input {
	color: #075c69;
	font-weight: 850;
	opacity: 1;
}

/* プレースホルダーは「入力例」と分かる薄い表示にする */
.try18-formwrap .try18-distance-row
.try18-unit-input input::placeholder {
	color: #a8b8bd !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	opacity: 1;
}

/* Chrome / Edgeの数値入力でも同じ見え方に統一 */
.try18-formwrap .try18-distance-row
.try18-unit-input input::-webkit-input-placeholder {
	color: #a8b8bd !important;
	font-size: 14px;
	font-weight: 500;
	opacity: 1;
}

.try18-formwrap .try18-distance-row
.try18-unit-input input::-moz-placeholder {
	color: #a8b8bd !important;
	font-size: 14px;
	font-weight: 500;
	opacity: 1;
}

/* フォーカス時は入力例をさらに薄くして、入力を促す */
.try18-formwrap .try18-distance-row
.try18-unit-input input:focus::placeholder {
	color: #c4cfd2 !important;
}

/* 入力例と入力済みの視覚差をスマホでも維持 */
@media (max-width: 767px) {
	.try18-formwrap .try18-distance-row
	.try18-unit-input input::placeholder {
		font-size: 13px;
	}
}


/* ===================================================================
   Ver.9.0.7 ランクカード整列
   3カードのバッジ・手数料・説明文の開始位置を統一
=================================================================== */

/* カード自体の高さを同じにする */
.try18-formwrap .try18-rank-cards {
	align-items: stretch;
	grid-auto-rows: 1fr;
}

.try18-formwrap .try18-rank-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

/* アイコンとテキスト部分をカード下端まで伸ばす */
.try18-formwrap .try18-rank-card-body {
	flex: 1 1 auto;
	height: 100%;
	align-items: stretch;
}

.try18-formwrap .try18-rank-content {
	display: grid;
	grid-template-rows:
		minmax(64px, auto)
		18px
		40px
		minmax(126px, 1fr);
	align-content: start;
	min-width: 0;
	height: 100%;
}

/* ランク名と特徴ラベルを全カードで同じ配置に固定 */
.try18-formwrap .try18-rank-title-row {
	display: grid;
	grid-template-rows: 27px 29px;
	align-content: start;
	align-items: start;
	gap: 6px;
	min-height: 64px;
	margin-bottom: 0;
}

.try18-formwrap .try18-rank-name {
	display: flex;
	align-items: center;
	min-height: 27px;
	line-height: 1.35;
	white-space: nowrap;
}

.try18-formwrap .try18-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	min-height: 25px;
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 1.25;
}

/* 手数料ラベル・金額の高さを統一 */
.try18-formwrap .try18-rank-fee-label {
	display: flex;
	align-items: center;
	min-height: 18px;
	margin: 0;
}

.try18-formwrap .try18-rank-fee {
	display: flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	line-height: 1.2;
}

/* 説明文の開始位置と最低高を揃える */
.try18-formwrap .try18-rank-description {
	min-height: 126px;
	margin: 0;
	padding-top: 5px;
	box-sizing: border-box;
}

/* PCの比較表示では3カードを均等幅にする */
@media screen and (min-width: 900px) {
	.try18-formwrap .try18-rank-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.try18-formwrap .try18-rank-card {
		min-width: 0;
	}
}

/* スマホは従来の縦並びと自然な高さを維持 */
@media screen and (max-width: 767px) {
	.try18-formwrap .try18-rank-cards {
		grid-auto-rows: auto;
	}

	.try18-formwrap .try18-rank-card {
		height: auto;
	}

	.try18-formwrap .try18-rank-card-body {
		height: auto;
		align-items: start;
	}

	.try18-formwrap .try18-rank-content {
		display: block;
		height: auto;
	}

	.try18-formwrap .try18-rank-title-row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		min-height: 0;
		margin-bottom: 8px;
	}

	.try18-formwrap .try18-rank-name,
	.try18-formwrap .try18-rank-badge,
	.try18-formwrap .try18-rank-fee-label,
	.try18-formwrap .try18-rank-fee,
	.try18-formwrap .try18-rank-description {
		min-height: 0;
	}

	.try18-formwrap .try18-rank-description {
		padding-top: 0;
	}
}


/* ===================================================================
   Ver.9.1.0 ランクカード全面整列
   アイコン → ランク名 → 特徴バッジ → 料金 → 説明文の順に統一
=================================================================== */

/*
 * 旧Ver9.0.7の横並び指定を上書きし、
 * 3カードとも完全に同一の縦構造へ変更します。
 */
.try18-formwrap .try18-rank-cards--vertical-layout {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 16px;
}

.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	padding: 18px;
	box-sizing: border-box;
}

/* 上部のチェック欄は従来どおり左寄せ */
.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-check {
	flex: 0 0 auto;
	min-height: 42px;
	margin-bottom: 18px;
	padding-bottom: 13px;
}

/* 本体を縦並び・中央揃えへ変更 */
.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-card-body {
	display: flex !important;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center !important;
	gap: 0;
	width: 100%;
	height: auto;
	text-align: center;
}

/* アイコン位置・サイズを統一 */
.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-icon {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	margin: 0 auto 16px;
}

/* カード内容を同一の行構成に固定 */
.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-content {
	display: grid !important;
	grid-template-rows:
		32px
		34px
		24px
		46px
		minmax(142px, 1fr);
	align-content: start;
	width: 100%;
	height: 100%;
	min-width: 0;
}

/* ランク名と特徴バッジを必ず縦並びにする */
.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-title-row {
	display: contents !important;
}

.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-name {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	margin: 0;
	color: #12313a;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	white-space: nowrap;
}

.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	justify-self: center;
	width: max-content;
	max-width: calc(100% - 16px);
	min-height: 27px;
	margin: 3px auto 4px;
	padding: 4px 12px;
	box-sizing: border-box;
	line-height: 1.25;
	white-space: nowrap;
}

/* 手数料ラベルと金額を同じ位置へ */
.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-fee-label {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 24px;
	margin: 0;
	padding-top: 3px;
	color: #70858d;
	font-size: 12px;
	text-align: center;
}

.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-fee {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	color: #08708a;
	font-size: 27px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

/* 説明文は区切り線付き・同じ高さから開始 */
.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-description {
	min-height: 142px;
	margin: 0;
	padding: 18px 2px 0;
	border-top: 1px solid #dce7ea;
	box-sizing: border-box;
	color: #536a72;
	font-size: 13px;
	line-height: 1.8;
	text-align: left;
}

/* 「おすすめ」リボンと本文が重ならないよう余白を確保 */
.try18-formwrap .try18-rank-cards--vertical-layout
.try18-rank-card-regular .try18-rank-check {
	padding-right: 72px;
}

/* PCでは比較しやすい完全3列 */
@media screen and (min-width: 900px) {
	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-card {
		min-height: 430px;
	}
}

/* タブレットは3列を維持しつつ、文字サイズを微調整 */
@media screen and (min-width: 768px) and (max-width: 899px) {
	.try18-formwrap .try18-rank-cards--vertical-layout {
		gap: 12px;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-card {
		padding: 15px;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-name {
		font-size: 16px;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-fee {
		font-size: 23px;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-description {
		font-size: 12px;
	}
}

/* スマホでは縦1列。各カード内の構造は同じ順序を維持 */
@media screen and (max-width: 767px) {
	.try18-formwrap .try18-rank-cards--vertical-layout {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 14px;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-card {
		height: auto;
		min-height: 0;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-card-body {
		height: auto;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-content {
		grid-template-rows:
			auto
			auto
			auto
			auto
			auto;
		height: auto;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-name,
	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-badge,
	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-fee-label,
	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-fee,
	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-description {
		min-height: 0;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-badge {
		margin-bottom: 12px;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-fee {
		margin-bottom: 10px;
	}

	.try18-formwrap .try18-rank-cards--vertical-layout .try18-rank-description {
		padding-top: 14px;
		text-align: left;
	}
}