XRプロモーション ショールーム来場予約フォーム
/* ===============================
【1】Giao diện chung & Layout
=============================== */
body {
font-family: 'Segoe UI', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
background-color: #f5f7fa;
font-size: 15px;
color: #333;
line-height: 1.5;
}
.container, .wrapper, form {
width: 100%;
max-width: 840px; /* Đã giảm 2cm */
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
/* ===============================
【2】Label + Input/Select căn hàng ngang
=============================== */
td.label {
display: inline-block;
width: 160px !important;
font-weight: bold;
font-size: 15px;
color: #222;
vertical-align: top;
padding-top: 10px;
}
td.value {
display: inline-block;
width: calc(100% - 180px);
margin-left: 20px;
vertical-align: top;
}
td.value input[type="text"],
td.value input[type="email"],
td.value input[type="tel"],
td.value textarea,
td.value select {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
padding: 10px 12px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
margin-bottom: 4px;
}
/* ===============================
【3】Chữ mô tả nhỏ, dòng ghi chú
=============================== */
td.comment,
.form-footer,
.privacy-policy-text,
.cookie-notice {
font-size: 12px;
color: #666;
line-height: 1.4;
margin: 4px 0 12px 180px;
}
/* ===============================
【4】Chữ 必須 (bắt buộc)
=============================== */
span.required::after {
content: " 必須";
color: red;
font-size: 12px;
margin-left: 4px;
}
/* ===============================
【5】Checkbox đẹp
=============================== */
input[type="checkbox"] {
transform: scale(1.1);
margin-right: 6px;
vertical-align: middle;
}
input[type="checkbox"] + label {
display: inline-block;
max-width: 100%;
line-height: 1.6;
margin-bottom: 6px;
}
label[for*="同意"], label[for*="agree"] {
display: inline-block;
margin-left: 0.2em;
font-weight: normal;
}
/* ===============================
【6】Nút gửi – full chiều ngang
=============================== */
input[type="submit"],
input[type="button"],
button {
background-color: #00bcd4;
color: #fff;
width: 100% !important; /* << đã sửa từ 48% về full chiều ngang */
padding: 16px 0;
font-size: 17px;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
transition: background-color 0.2s ease, transform 0.1s ease;
margin-top: 24px;
display: block;
}
/* ===============================
【7】Header / Logo / Tiêu đề
=============================== */
h1, h2, .form-title, .top-message-text {
font-size: 20px !important;
font-weight: bold;
text-align: center;
line-height: 1.4;
margin: 12px 0 24px 0;
word-break: keep-all;
white-space: nowrap;
}
.top-message-text {
max-width: 100%;
display: inline-block;
padding: 0 8px;
}
form .formHeader,
.form-header,
.header-logo,
.logo-wrapper {
margin-top: 10px !important;
margin-bottom: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.formHeader + div,
.form-header + div {
margin-top: 0 !important;
}
.form-subtitle {
font-size: 14px;
margin-top: 4px;
margin-bottom: 4px;
color: #444;
}
.formHeaderWrapper,
.header-container {
padding: 0 !important;
margin-bottom: 8px !important;
}
/* ===============================
【8】Xác nhận không bị ngắt dòng
=============================== */
.confirmation-message,
.confirm-title,
.top-confirm-text,
.confirm-instruction {
font-size: 14px;
line-height: 1.4;
text-align: center;
margin-bottom: 16px;
white-space: nowrap;
word-break: keep-all;
max-width: 100%;
}
.confirmation-message::after {
content: "ご入力内容をご確認ください。修正がある場合は「戻る」、問題なければ「送信」を押してください。";
display: block;
font-size: 14px;
line-height: 1.5;
white-space: nowrap;
}
.confirmation-message > * {
display: none;
}
/* ===============================
【9】Phần ご予約に関するご案内: giảm cỡ chữ
=============================== */
td.label:has(> span:contains("ご予約に関するご案内")),
td.label:has(> div:contains("ご予約に関するご案内")),
.form-body label:has(> span:contains("ご予約に関するご案内")) {
font-size: 14px !important;
}
td.value ul,
td.value li {
font-size: 13px !important;
line-height: 1.4;
}
/* ------------------------
【送信完了画面のスタイル調整】
------------------------ */
.form-complete-message {
text-align: center;
margin-top: 32px;
}
.form-complete-message h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
color: #2e7d32;
}
.form-complete-message p.intro {
font-size: 15px;
color: #333;
margin-bottom: 24px;
}
.notice-block-complete {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 20px;
margin: 0 auto;
max-width: 600px;
border-radius: 8px;
font-size: 14px;
line-height: 1.8;
color: #444;
text-align: left;
}
.notice-block-complete .title {
font-weight: bold;
color: #444;
margin-bottom: 12px;
font-size: 16px;
}
/* ===============================
【Responsive - Tối ưu hiển thị trên điện thoại】
=============================== */
@media screen and (max-width: 768px) {
.container, .wrapper, form {
max-width: 100% !important;
padding: 16px !important;
}
td.label, td.value {
display: block !important;
width: 100% !important;
margin: 0 !important;
}
td.label {
padding-top: 8px !important;
font-size: 14px !important;
}
td.value input[type="text"],
td.value input[type="email"],
td.value input[type="tel"],
td.value textarea,
td.value select {
width: 100% !important;
font-size: 15px !important;
}
.form-footer,
.privacy-policy-text,
.cookie-notice {
margin-left: 0 !important;
font-size: 13px !important;
text-align: left;
}
input[type="submit"],
input[type="button"],
button {
width: 100% !important;
font-size: 16px !important;
padding: 14px 0;
}
}
/* ===== Căn mỗi dòng checkbox thành một hàng ngang ===== */
td.value input[type="checkbox"] + label {
white-space: nowrap;
display: inline-block;
}
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。