@charset "UTF-8";
/* ============================================================
   掲載依頼フォーム (cartopテーマ準拠)
   - アクセント: #e63100 (サイトCTA色) / ボタン・ヘッダー: #FDD000
   - 構造: care_top_basic_st の st_title / st_data と同じ
     「ラベル+値」の行構成をフォームに転用
   - bootstrap-grid (container/row/col) と共存する前提のため
     すべて csf- プレフィックスで完結
   ------------------------------------------------------------
   目次:
     1. リセット・共通
     2. ヘッダー・パンくず
     3. ページタイトル・セクション見出し
     4. 項目行 (ラベル+入力)
     5. 入力部品 (input/textarea/select/単位付き)
     6. 写真アップロード
     7. ボタン (送信/戻る/選択解除)
     8. メッセージ (エラー/完了)
     9. 確認画面
    10. スマホ (768px以下)
   ============================================================ */

/* ============================================================
   1. リセット・共通
   ============================================================ */
body { margin: 0; padding: 0; }

.csf-wrap {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 15px 60px;
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}

/* ============================================================
   2. ヘッダー・パンくず
   ※ WPテンプレート内に組み込む場合はテーマのCSSが効くため
     この csf-header 系のフォールバックは削除してOK
   ============================================================ */
.csf-header {
	background: #FDD000;
	width: 100%;
}
.csf-header .container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}
.csf-header .header_in {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
}
.csf-header .logo img {
	max-height: 44px;
	width: auto;
	display: block;
}

.csf-breadcrumb {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 15px;
	font-size: 12px;
	color: #888;
}
.csf-breadcrumb a { color: #888; text-decoration: none; }
.csf-breadcrumb a:hover { text-decoration: underline; }
.csf-breadcrumb .ar { margin: 0 6px; }

/* ============================================================
   3. ページタイトル・セクション見出し
   ============================================================ */
.csf-page-title {
	font-size: 22px;
	font-weight: bold;
	margin: 30px 0 10px;
	padding-bottom: 10px;
	border-bottom: 3px solid #e63100;
}
.csf-lead {
	font-size: 13px;
	color: #666;
	margin: 0 0 30px;
}
.csf-section-title {
	font-size: 17px;
	font-weight: bold;
	margin: 40px 0 0;
	padding: 10px 14px;
	background: #f2f2f2;
	border-left: 5px solid #e63100;
}

/* ============================================================
   4. 項目行 (ul.care_top_basic_st の st_title/st_data 転用)
   ============================================================ */
.csf-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #ddd;
	border-top: none;
}
.csf-list > li {
	display: flex;
	border-bottom: 1px solid #ddd;
}
.csf-list > li:last-child { border-bottom: none; }

.csf-title {
	flex: 0 0 220px;
	padding: 14px;
	background: #fafafa;
	font-weight: bold;
	font-size: 14px;
	border-right: 1px solid #ddd;
}
.csf-data {
	flex: 1;
	padding: 14px;
	min-width: 0;
}

/* 必須/任意バッジ */
.csf-req, .csf-opt {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: normal;
	color: #fff;
	border-radius: 3px;
	vertical-align: 2px;
	white-space: nowrap;
}
.csf-req { background: #e63100; }
.csf-opt { background: #8a8b8b; }

/* ============================================================
   5. 入力部品
   ============================================================ */
.csf-data input[type=text],
.csf-data input[type=tel],
.csf-data input[type=email],
.csf-data input[type=url],
.csf-data input[type=number],
.csf-data textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	background: #fff;
}
.csf-data textarea { height: 6.5em; resize: vertical; }

.csf-data select.csf-select {
	width: 100%;
	max-width: 300px;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
}

.csf-data input:focus,
.csf-data textarea:focus,
.csf-data select.csf-select:focus {
	outline: none;
	border-color: #e63100;
	box-shadow: 0 0 0 3px rgba(230, 49, 0, .12);
}

.csf-note  { font-size: 12px; color: #888; margin: 6px 0 0; }
.csf-count { display: block; text-align: right; font-size: 12px; color: #8a8b8b; margin-top: 4px; }
.csf-count.is-over { color: #e63100; font-weight: bold; }

/* 単位付き入力 (走行距離・価格) */
.csf-unit-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 300px;
	width: 100%;
}
.csf-unit-wrap input {
	flex: 1;
	min-width: 0;
	text-align: right;   /* 数値入力なので右寄せ */
}

.csf-unit {
	flex-shrink: 0;
	font-size: 15px;
	color: #333;
	white-space: nowrap;
}
/* チェックボックス項目 */
.csf-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 15px;
}
.csf-check input[type=checkbox] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #e63100;
	cursor: pointer;
}
.csf-check-badge {
	display: inline-block;
    margin-left: 6px;
    font-weight: bold;
    color: #ff0000;
    vertical-align: 1px;
}

/* ============================================================
   6. 写真アップロード
   ============================================================ */
.csf-drop {
	display: block;              /* label要素はデフォルトinlineのためブロック化 */
	border: 2px dashed #ccc;
	border-radius: 6px;
	padding: 26px 14px;
	text-align: center;
	color: #666;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color .15s, background .15s;
}
.csf-drop .csf-note {
	display: block;
	margin-top: 6px;
}
.csf-drop:hover, .csf-drop.is-dragover {
	border-color: #e63100;
	background: #fff6f4;
}
.csf-drop strong { color: #e63100; }
.csf-drop input[type=file] { display: none; }

.csf-thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
}
.csf-thumbs li {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	background: #f2f2f2;
}
.csf-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csf-thumbs .csf-thumb-no {
	position: absolute;
	left: 0; top: 0;
	padding: 0 6px;
	font-size: 11px;
	color: #fff;
	background: rgba(0, 0, 0, .55);
	border-radius: 0 0 4px 0;
}
.csf-photo-status { font-size: 13px; margin-top: 8px; }
.csf-photo-status .csf-photo-count { font-weight: bold; color: #e63100; }

/* ============================================================
   7. ボタン
   ============================================================ */
.csf-submit-area { margin-top: 36px; text-align: center; }

/* 送信 (a.info_btn / btn_line 相当。ヘッダー同色・黒文字) */
.csf-submit {
	display: inline-block;
	width: 100%;
	max-width: 420px;
	padding: 16px 20px;
	background: #FDD000;
	color: #000;
	font-size: 17px;
	font-weight: bold;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: opacity .15s;
}
.csf-submit:hover { opacity: .85; }
.csf-submit .csf-sub-t {
	display: block;
	font-size: 12px;
	font-weight: normal;
	margin-top: 4px;
	color: #333;
}

/* 戻る */
.csf-back {
	display: inline-block;
	width: 100%;
	max-width: 420px;
	padding: 16px 28px;
	background: #fff;
	color: #666;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	cursor: pointer;
	transition: background .15s;
}
.csf-back:hover { background: #f2f2f2; }

/* ボタン行 (確認画面: 送信+戻る) */
.csf-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
}

/* 写真の選択解除 */
.csf-clear-photos {
	margin-left: 12px;
	padding: 4px 12px;
	font-size: 12px;
	color: #666;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
}
.csf-clear-photos:hover { background: #f2f2f2; }

.csf-privacy { font-size: 12px; color: #888; text-align: center; margin-top: 10px; }

/* ============================================================
   8. メッセージ
   ============================================================ */
/* ページ上部の全体エラー */
.csf-error {
	background: #fdecea;
	border: 1px solid #e63100;
	color: #b32600;
	padding: 12px 16px;
	margin: 0 0 24px;
	font-size: 14px;
}
/* 項目ごとのエラー (入力欄の上) */
.csf-field-error {
	margin: 0 0 6px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: bold;
	color: #b32600;
	background: #fdecea;
	border-radius: 2px;
}
/* 送信完了 */
.csf-done {
	background: #eef7ee;
	border: 1px solid #4a9d4a;
	padding: 16px;
}

/* ============================================================
   9. 確認画面
   ============================================================ */
.csf-confirm {
	font-size: 15px;
	color: #333;
	word-break: break-all;
}
.csf-confirm-thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
}
.csf-confirm-thumbs li {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	background: #f2f2f2;
}
.csf-confirm-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   10. スマホ (テーマの768pxブレークポイントに合わせる)
   ============================================================ */
@media only screen and (max-width: 768px) {
	.csf-page-title { font-size: 19px; }
	.csf-list > li { display: block; }
	.csf-title {
		flex: none;
		border-right: none;
		border-bottom: 1px solid #eee;
		padding: 10px 12px;
	}
	.csf-data { padding: 12px; }
	.csf-submit { max-width: none; }
	.csf-back { max-width: none; }
}


.csf-thumbs .csf-thumb-del {
	position: absolute;
	right: 2px;
	top: 2px;
	width: 22px;
	height: 22px;
	padding: 0;
	line-height: 20px;
	font-size: 14px;
	color: #fff;
	background: rgba(0, 0, 0, .6);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
.csf-thumbs .csf-thumb-del:hover { background: #e63100; }

/* 確認画面: メイン画像バッジ */
.csf-confirm-thumbs .csf-thumb-no {
	position: absolute;
	left: 0; top: 0;
	padding: 0 6px;
	font-size: 11px;
	color: #fff;
	background: rgba(0, 0, 0, .55);
	border-radius: 0 0 4px 0;
}
.csf-confirm-thumbs .csf-thumb-main {
	position: absolute;
	right: 0; bottom: 0;
	padding: 1px 8px;
	font-size: 10px;
	font-weight: bold;
	color: #000;
	background: #FDD000;
	border-radius: 4px 0 0 0;
}
/* 確認画面: 枚数表示 */
.csf-confirm-photo-status {
	margin: 10px 0 0;
	font-size: 13px;
	color: #666;
}

.csf-confirm-thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	max-width: 100%;
}
.csf-confirm-thumbs li {
	position: relative;
	aspect-ratio: 4 / 3;
	min-width: 0;          /* ★グリッドセルが中身の内在サイズに広がるのを禁止 */
	overflow: hidden;      /* ★自動最小サイズを0にする(これが無いと巨大画像でセルが破裂) */
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #f2f2f2;
}
.csf-confirm-thumbs img {
	position: absolute;    /* ★内在サイズの影響を完全に断つ */
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ---- 送信完了画面 */
.csf-thanks {
	text-align: center;
	padding: 40px 20px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
}
.csf-thanks-icon {
	width: 64px;
	height: 64px;
	line-height: 64px;
	margin: 0 auto 16px;
	font-size: 32px;
	color: #fff;
	background: #4a9d4a;
	border-radius: 50%;
}
.csf-thanks-main {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 12px;
}
.csf-thanks-sub {
	font-size: 14px;
	color: #333;
	margin: 0 0 16px;
}
.csf-thanks-note {
	font-size: 12px;
	color: #888;
	margin: 0;
}
.csf-thanks-btn {
	text-decoration: none;
	box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
	.csf-pc-only { display: none; }
	.csf-thanks {
		text-align: left;
		padding: 24px 16px;
	}
	.csf-thanks-icon,
	.csf-thanks-main {
		text-align: center;   /* アイコンと見出しだけは中央のまま */
	}
}