/* E&beOffice 申し込みフォーム
   SWELL のデザインに馴染むよう、テーマのカラー変数を利用する */

.eandbe-form {
	--eandbe-border: #dcdfe3;
	--eandbe-bg: #f7f8fa;
	--eandbe-req: #d64550;
	--eandbe-opt: #8a9099;
	max-width: 780px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.8;
}

/* --- セクション見出し ---
   見た目はテーマ（SWELL）の h2 装飾に任せ、前後の余白だけを指定する */
.eandbe-form h2.eandbe-form__section {
	margin-top: 3.6em;
	margin-bottom: 1.8em;
}
.eandbe-form h2.eandbe-form__section:first-of-type {
	margin-top: 2.4em;
}
.eandbe-form .eandbe-lead {
	margin-bottom: 0;
}

/* --- WordPress の自動整形への対応 ---
   本文は WordPress が自動的に <p> で囲むため、フォーム内の <p> には
   テーマの段落余白が乗ってしまう。ここで打ち消しておく。
   （.eandbe-note / .eandbe-hint は個別指定が優先される） */
.eandbe-form p {
	margin: 0;
}

/* --- 各項目 --- */
.eandbe-form .eandbe-field {
	padding: 2.1em 0;
	border-bottom: 1px solid var(--eandbe-border);
	scroll-margin-top: 110px; /* 固定ヘッダーに隠れないように */
}
.eandbe-form .eandbe-field:last-child {
	border-bottom: none;
}
.eandbe-form .eandbe-field__label {
	margin-bottom: 1em;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.9;
}

/* --- 必須／任意のマーク --- */
.eandbe-form .eandbe-badge {
	display: inline-block;
	min-width: 3.6em;
	margin-right: 1.4em;
	padding: 0.45em 0.85em;
	border-radius: 4px;
	font-size: 0.74em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-align: center;
	vertical-align: 0.1em;
	color: #fff;
}
.eandbe-form .eandbe-badge.-req { background: var(--eandbe-req); }
.eandbe-form .eandbe-badge.-opt { background: var(--eandbe-opt); }

/* --- 補足テキスト --- */
.eandbe-form .eandbe-note {
	margin: 0 0 1.2em;
	padding: 0.95em 1.2em;
	background: var(--eandbe-bg);
	border-radius: 5px;
	font-size: 0.88em;
	line-height: 1.9;
	color: #4a4f55;
}
.eandbe-form .eandbe-hint {
	margin: 0.8em 0 0;
	font-size: 0.85em;
	line-height: 1.9;
	color: #6b7178;
}
.eandbe-form .eandbe-hint a { text-decoration: underline; }

/* --- 入力欄 --- */
.eandbe-form input[type="text"],
.eandbe-form input[type="email"],
.eandbe-form input[type="tel"],
.eandbe-form input[type="number"],
.eandbe-form select,
.eandbe-form textarea {
	width: 100%;
	padding: 0.85em 0.95em;
	border: 1px solid #c8ccd1;
	border-radius: 4px;
	background: #fff;
	font-size: 1em;
	line-height: 1.5;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.eandbe-form select {
	background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 13px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.2em;
}
.eandbe-form textarea { min-height: 9em; resize: vertical; }
.eandbe-form input:focus,
.eandbe-form select:focus,
.eandbe-form textarea:focus {
	outline: none;
	border-color: var(--color_main, #35bdb2);
	box-shadow: 0 0 0 3px rgba(53, 189, 178, 0.15);
}

/* --- 横並び（氏名・住所） --- */
.eandbe-form .eandbe-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1em;
}
.eandbe-form .eandbe-row + .eandbe-row {
	margin-top: 1.1em;
}
.eandbe-form .eandbe-row > .eandbe-col { flex: 1 1 0; min-width: 0; }
.eandbe-form .eandbe-row > .eandbe-col.-zip { flex: 0 0 11em; }
.eandbe-form .eandbe-row > .eandbe-col.-pref { flex: 0 0 9em; }
.eandbe-form .eandbe-col__label {
	display: block;
	margin-bottom: 0.5em;
	font-size: 0.84em;
	line-height: 1.6;
	color: #6b7178;
}

/* --- ラジオ・チェックボックス --- */
.eandbe-form .wpcf7-radio,
.eandbe-form .wpcf7-checkbox {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
}
.eandbe-form .wpcf7-list-item { margin: 0; }
.eandbe-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.8em;
	padding: 1em 1.2em;
	border: 1px solid #c8ccd1;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.eandbe-form .wpcf7-list-item label:hover {
	border-color: var(--color_main, #35bdb2);
	background: #fafffe;
}
.eandbe-form .wpcf7-list-item input[type="radio"],
.eandbe-form .wpcf7-list-item input[type="checkbox"] {
	margin-top: 0.35em;
	flex: none;
	accent-color: var(--color_main, #35bdb2);
	width: 1.05em;
	height: 1.05em;
}
.eandbe-form .wpcf7-list-item.-checked label {
	border-color: var(--color_main, #35bdb2);
	background: #f2fbfa;
	box-shadow: inset 0 0 0 1px var(--color_main, #35bdb2);
}
/* 「その他」の自由記入欄 */
.eandbe-form .wpcf7-free-text {
	margin-top: 0.5em;
	width: 100%;
}

/* --- ファイル選択 --- */
.eandbe-form .eandbe-file { display: grid; gap: 1.5em; }
.eandbe-form .eandbe-file__item {
	padding: 1.4em 1.5em;
	border: 1px dashed #c8ccd1;
	border-radius: 6px;
	background: #fcfcfd;
}
.eandbe-form .eandbe-file__item .eandbe-field__label {
	margin-bottom: 0.6em;
	font-size: 1em;
}
.eandbe-form .eandbe-file__item .eandbe-hint { margin: 0 0 1em; }
.eandbe-form input[type="file"] {
	width: 100%;
	padding: 0.5em 0;
	font-size: 0.92em;
	line-height: 1.8;
}

/* --- 条件表示ブロック ---
   JS が動いているときだけ隠す。JS が読み込めなかった場合は
   全項目が表示され、フォームが使えなくなることを防ぐ。 */
.eandbe-form.-js .eandbe-cond { display: none; }
.eandbe-form.-js .eandbe-cond.-visible { display: block; }
/* 「その他の詳細」など、項目の中に入れ込む条件ブロック */
.eandbe-form .eandbe-field > .eandbe-cond.-visible { margin-top: 1.1em; }
.eandbe-form .eandbe-doclist {
	margin: 0 0 2em;
	padding: 1.5em 1.8em;
	background: #fffdf3;
	border: 1px solid #f0e4b8;
	border-radius: 5px;
	font-size: 0.9em;
}
.eandbe-form .eandbe-doclist p { margin: 0 0 0.9em; line-height: 1.9; }
.eandbe-form .eandbe-doclist ul { margin: 0 0 1.4em 1.4em; }
.eandbe-form .eandbe-doclist li { margin: 0.3em 0; }
.eandbe-form .eandbe-doclist > :last-child { margin-bottom: 0; }

/* --- 規約同意 --- */
.eandbe-form .eandbe-agree {
	margin-top: 2.8em;
	padding: 1.6em;
	background: var(--eandbe-bg);
	border-radius: 5px;
	text-align: center;
}
.eandbe-form .eandbe-agree .wpcf7-list-item label {
	display: inline-flex;
	border: none;
	background: none;
	padding: 0;
}
.eandbe-form .eandbe-agree .wpcf7-list-item label:hover { background: none; }

/* --- 送信ボタン --- */
.eandbe-form .eandbe-submit { margin: 2.4em 0 1em; text-align: center; }
.eandbe-form input[type="submit"] {
	min-width: 260px;
	padding: 1em 2.5em;
	border: none;
	border-radius: 50px;
	background: var(--color_main, #35bdb2);
	color: #fff;
	font-size: 1.05em;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.2s;
}
.eandbe-form input[type="submit"]:hover { opacity: 0.85; transform: translateY(-1px); }
.eandbe-form input[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* --- エラー表示 --- */
.eandbe-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35em;
	color: var(--eandbe-req);
	font-size: 0.85em;
	font-weight: 700;
}
.eandbe-form .wpcf7-not-valid {
	border-color: var(--eandbe-req) !important;
	background: #fff8f8;
}
.wpcf7 .wpcf7-response-output {
	margin: 1.5em 0 0;
	padding: 1.1em 1.3em;
	border-radius: 5px;
	font-size: 0.95em;
	line-height: 1.8;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border: 1px solid #f0c2c2;
	background: #fff5f5;
	color: #b3323c;
}
.wpcf7 form.sent .wpcf7-response-output {
	border: 1px solid #bfe3c8;
	background: #f4fbf6;
	color: #2b7a44;
}
.eandbe-form .wpcf7-spinner { margin: 0.8em auto 0; display: block; }

/* --- スマホ --- */
@media (max-width: 600px) {
	.eandbe-form { font-size: 14.5px; }
	.eandbe-form .eandbe-field { padding: 1.7em 0; }
	.eandbe-form .eandbe-row { gap: 0.9em; }
	.eandbe-form .eandbe-row + .eandbe-row { margin-top: 0.9em; }
	.eandbe-form .eandbe-file__item { padding: 1.1em 1.2em; }
	.eandbe-form .eandbe-doclist { padding: 1.2em 1.3em; }
	.eandbe-form .eandbe-row > .eandbe-col { flex: 1 1 100%; }
	.eandbe-form .eandbe-row > .eandbe-col.-zip,
	.eandbe-form .eandbe-row > .eandbe-col.-pref { flex: 1 1 100%; }
	.eandbe-form input[type="submit"] { width: 100%; min-width: 0; }
}