@charset "utf-8";
/* ============================================================================
 * LP｜カビ除去（法人向け） 追加スタイル
 * - lp-mold.css（Figmaデザイン由来のTailwind出力）の後に読み込むこと
 * - MW WP Form の出力、details/summary アコーディオン、固定ヘッダーの余白を担当
 * ========================================================================== */

/* ---------- レイアウト調整 ---------- */
#lp-main { padding-top: 56px; }
@media (min-width: 768px) { #lp-main { padding-top: 92px; } }

/* ページが短くてもフッターが画面下端に来るようにする（サンクスページ対策） */
body.lp-mold { display: flex; flex-direction: column; min-height: 100vh; }
body.lp-mold > #lp-main { flex: 1 0 auto; }
body.lp-mold > footer { flex-shrink: 0; }

/* モバイル追従CTAに隠れないよう下部に余白 */
@media (max-width: 767px) { body.lp-mold { padding-bottom: 76px; } }

/* アンカーリンクのスクロール位置調整 */
#lp-main [id] { scroll-margin-top: 100px; }

/* ----------------------------------------------------------------------------
 * lp-mold.css に無いユーティリティの補完
 *
 * lp-mold.css は「Figmaデザインで実際に使われたクラスだけ」を含む生成物のため、
 * こちらで新しく書いたマークアップで使うクラスは定義されていないことがある。
 * 追加でクラスを使うときは、ここに定義を足すか、既に使われているクラスに合わせる。
 * ------------------------------------------------------------------------- */
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.mt-6 { margin-top: 1.5rem; }
.z-40 { z-index: 40; }
@media (min-width: 768px) {
	.md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
	.md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
}

/* ---------- FAQ アコーディオン ---------- */
.lp-faq summary { list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::marker { content: ""; }
.lp-faq details[open] summary svg { transform: rotate(180deg); }
.lp-faq summary:focus-visible { outline: 2px solid #2479AF; outline-offset: -2px; }

/* ============================================================================
 * MW WP Form
 * ========================================================================== */
.lp-form { color: #102035; }
.lp-form .mw_wp_form > form > * + * { margin-top: 20px; }

/* 項目 */
.lp-field { margin-bottom: 20px; }
.lp-field:last-child { margin-bottom: 0; }

.lp-label {
	display: block;
	color: #102035;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 6px;
}
.lp-req { color: #ef4444; margin-left: 4px; }
.lp-optional { color: #507090; font-size: 12px; font-weight: 400; margin-left: 6px; }

/* 2カラムグリッド */
.lp-grid2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .lp-grid2 { grid-template-columns: 1fr 1fr; } }

/* 入力欄 */
.lp-form input[type="text"],
.lp-form input[type="tel"],
.lp-form input[type="email"],
.lp-form input[type="number"],
.lp-form select,
.lp-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #8BBACE;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.6;
	color: #102035;
	font-family: inherit;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}
.lp-form textarea { resize: vertical; min-height: 120px; }
.lp-form select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232479AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}
.lp-form input::placeholder,
.lp-form textarea::placeholder { color: #97B5C8; }
.lp-form input:focus,
.lp-form select:focus,
.lp-form textarea:focus {
	outline: none;
	border-color: #2479AF;
	box-shadow: 0 0 0 3px rgba(36, 121, 175, .25);
}

/* 電話番号などを横並びにする場合（mwform_tel の3分割対策） */
.lp-form .mwform-tel-field input { display: inline-block; width: auto; max-width: 120px; }
.lp-form .mwform-zip-field input { display: inline-block; width: auto; max-width: 120px; }

/* ラジオ・チェックボックス */
.lp-radio .mwform-radio-field,
.lp-radio .mwform-checkbox-field { display: inline-flex; align-items: center; margin: 0 20px 8px 0; cursor: pointer; }
.lp-radio input[type="radio"],
.lp-radio input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2479AF; margin-right: 8px; }
.lp-radio .mwform-radio-field-text,
.lp-radio .mwform-checkbox-field-text { font-size: 14px; color: #102035; }

/* ファイル添付：枠全体がクリック領域 */
.lp-file {
	position: relative;
	border: 2px dashed #8BBACE;
	border-radius: 12px;
	padding: 24px;
	background: #F0F9FD;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.lp-file:hover { border-color: #2479AF; background: #EAF6FB; }
.lp-file.is-dragover { border-color: #0C8C5E; background: #E6F7EF; border-style: solid; }
.lp-file.is-selected { border-style: solid; border-color: #0C8C5E; background: #E6F7EF; }
.lp-file-icon {
	width: 40px; height: 40px;
	margin: 0 auto 10px;
	border-radius: 9999px;
	background: #EAF6FB;
	display: flex; align-items: center; justify-content: center;
	color: #2479AF;
}
.lp-file-title { color: #102035; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.lp-file-note { color: #507090; font-size: 12px; }
.lp-file-name { display: block; color: #0C8C5E; font-size: 12px; font-weight: 700; margin-top: 8px; word-break: break-all; }
.lp-file + .lp-file { margin-top: 12px; }

/* 選択した写真のサムネイル（ブラウザ内で表示するだけ／通信は発生しない） */
.lp-file-thumb { margin-top: 10px; position: relative; z-index: 1; pointer-events: none; }
.lp-file-thumb img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 140px;
	width: auto;
	height: auto;
	border-radius: 8px;
	border: 1px solid #8BBACE;
	background: #fff;
}

/* input[type=file] は枠いっぱいに広げて透明にし、枠のどこを押しても選択できるようにする */
.lp-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
/* 確認画面ではファイル名リンクを表示するので、上の透明化を打ち消す */
.mw_wp_form_confirm .lp-file input[type="file"] { position: static; opacity: 1; height: auto; }

/* MW WP Form の削除ボタン（×）は透明inputより前面に出す */
.lp-file .mwform-file-delete {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 2;
	width: 24px;
	height: 24px;
	line-height: 22px;
	text-align: center;
	border-radius: 9999px;
	background: #fff;
	border: 1px solid #8BBACE;
	color: #507090;
	font-size: 14px;
	cursor: pointer;
}
.lp-file .mwform-file-delete:hover { background: #EAF6FB; color: #102035; }

/* 確認画面：添付済みファイル名のリンク */
.lp-file a { position: relative; z-index: 2; color: #2479AF; text-decoration: underline; word-break: break-all; }

/* プライバシー注記 */
.lp-note {
	background: #EAF6FB;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 12px;
	line-height: 1.8;
	color: #507090;
}
.lp-note a { color: #2479AF; text-decoration: underline; }

/* 送信ボタン */
.lp-submit { margin-top: 20px; }
.lp-form input[type="submit"],
.lp-form button[type="submit"] {
	display: block;
	width: 100%;
	background: #0C8C5E;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	font-family: inherit;
	line-height: 1.5;
	padding: 16px 24px;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color .15s;
	-webkit-appearance: none;
	appearance: none;
}
.lp-form input[type="submit"]:hover,
.lp-form button[type="submit"]:hover { background: #097a51; }

/* 確認画面の「戻る」ボタン */
.lp-form input[name="submitBack"],
.lp-back input[type="submit"] {
	background: #fff;
	color: #2479AF;
	border: 2px solid #2479AF;
	margin-top: 12px;
}
.lp-form input[name="submitBack"]:hover,
.lp-back input[type="submit"]:hover { background: #EAF6FB; }

/* エラー表示 */
.lp-form .error {
	display: block;
	color: #dc2626;
	font-size: 13px;
	font-weight: 700;
	margin-top: 6px;
}
.lp-form .mw_wp_form_error input,
.lp-form .mw_wp_form_error select,
.lp-form .mw_wp_form_error textarea { border-color: #dc2626; }

/* 確認画面：入力値の表示 */
.mw_wp_form_confirm .lp-form .lp-field { border-bottom: 1px solid #EAF6FB; padding-bottom: 16px; }
.mw_wp_form_confirm .lp-form .lp-grid2 { gap: 16px; }
.mw_wp_form_confirm .lp-form .lp-file { border-style: solid; background: #fff; text-align: left; }
.mw_wp_form_confirm .lp-form .lp-file-icon,
.mw_wp_form_confirm .lp-form .lp-file-title,
.mw_wp_form_confirm .lp-form .lp-file-note { display: none; }

/* 完了画面 */
.mw_wp_form_complete .lp-form { font-size: 16px; line-height: 2; }