/* ===================================
基本設定
=================================== */
:root {
--main: #0098d9;
--main-dark: #0078ad;
--main-hover: #007fb5;
--main-light: #e8f7fd;
--bg: #f7fbfe;
--bg-soft: #edf9ff;
--text: #1f2933;
--muted: #64748b;
--line: #d7eaf4;
--white: #ffffff;
--required: #e54848;
--required-bg: #fff4f4;
--required-line: #ffd6d6;
}
html {
width: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
background: var(--white);
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
li {
list-style: none;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
/* ===================================
共通
=================================== */
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
background: var(--white);
color: var(--text);
font-family:
"Noto Sans JP",
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
Meiryo,
sans-serif;
font-size: 15px;
line-height: 1.8;
letter-spacing: 0.03em;
text-align: center;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
select,
input,
button,
textarea {
box-sizing: border-box;
font-family:
"Noto Sans JP",
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
Meiryo,
sans-serif;
}
/* ===================================
画面全体のレイアウト
=================================== */
div.container {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0;
color: var(--text);
font-size: 15px;
line-height: 1.8;
text-align: left;
background: var(--white);
border: 0;
}
div.wrapper {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
background: var(--white);
}
form {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* ===================================
設問エリアのレイアウト
=================================== */
table.items {
display: block;
width: 100%;
max-width: 100%;
border: 0;
border-spacing: 0;
border-collapse: collapse;
}
table.items tbody {
display: block;
width: 100%;
max-width: 100%;
}
tr.item {
display: block;
width: 100%;
max-width: 100%;
margin: 0 0 16px;
padding: 0;
background: var(--white);
border: 0;
box-shadow: none;
}
/* 設問名 */
td.label {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 12px 10px 7px;
color: var(--text);
font-size: 15px;
font-weight: 700;
line-height: 1.7;
background: var(--white);
border: 0;
}
/* 入力欄 */
td.value {
display: block;
float: none;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 12px 14px;
color: var(--text);
font-size: 15px;
line-height: 1.8;
background: #f8fbfd;
border: 1px solid #edf6fb;
box-shadow: none;
}
/* 説明文 */
td.comment {
display: block;
float: none;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 7px 14px 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
background: var(--white);
border: 0;
}
/* ===================================
入力セル内のテキスト
=================================== */
/* 「氏」「名」などのラベル */
span.label_name {
display: inline-block;
margin: 0 6px 0 0;
padding: 0;
color: var(--text);
font-size: 14px;
font-weight: 500;
line-height: 1.6;
vertical-align: middle;
}
/* 入力確認画面・完了画面の値 */
p.value,
div.container p.value {
margin: 0;
padding: 0;
color: var(--text);
font-size: 15px;
font-weight: 500;
line-height: 1.8;
}
/* ===================================
入力コントロール
=================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea {
width: 320px;
max-width: 100%;
min-height: 42px;
margin: 0;
padding: 9px 11px;
color: var(--text);
font-size: 15px;
font-weight: 400;
line-height: 1.6;
background: var(--white);
border: 1px solid #b9c6cf;
border-radius: 0;
outline: none;
box-shadow: none;
transition:
border-color 0.2s ease,
background-color 0.2s ease;
}
input[type="text"] {
height: 42px !important;
}
select {
min-height: 42px;
padding-right: 32px;
background-color: var(--white);
}
textarea {
min-height: 44px;
resize: vertical;
}
/* 住所欄 */
input[name="address"] {
width: 720px;
max-width: 100%;
}
/* お問い合わせ内容 */
textarea[name="data_08"] {
width: 720px;
max-width: 100%;
height: 120px !important;
min-height: 120px;
}
/* ===================================
氏名欄
=================================== */
td.value:has(span.label_name) {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
width: 100%;
max-width: 100%;
white-space: normal;
}
td.value:has(span.label_name) br {
display: none;
}
td.value:has(span.label_name) span.label_name {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
margin: 0;
padding: 0;
color: var(--text);
font-size: 14px;
font-weight: 500;
line-height: 1.6;
white-space: nowrap;
}
td.value:has(span.label_name) input[type="text"] {
flex: 0 1 260px;
width: 260px !important;
max-width: 260px !important;
min-width: 0;
margin: 0;
}
/* :has非対応環境向け */
td.value span.label_name + input[type="text"],
td.value span.label_name ~ input[type="text"] {
width: 260px;
max-width: 260px;
margin-right: 12px;
vertical-align: middle;
}
/* ===================================
入力欄のフォーカス
=================================== */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
background: var(--white);
border-color: var(--main);
box-shadow: none;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid rgba(0, 152, 217, 0.22);
outline-offset: 1px;
}
/* ===================================
ラジオボタン・チェックボックス
=================================== */
input[type="radio"],
input[type="checkbox"] {
margin: 0 6px 0 0;
vertical-align: middle;
accent-color: var(--main);
}
td.value label {
max-width: 100%;
color: var(--text);
font-size: 15px;
line-height: 1.8;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
/* ===================================
ボタンの表示エリア
=================================== */
div.button_area {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
width: 100%;
max-width: 720px;
margin: 32px auto 24px;
padding: 0;
text-align: center;
background: transparent;
box-shadow: none;
}
/* 確認・送信・登録ボタン */
input[type="button"],
input[type="submit"],
button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 48px;
margin: 0;
padding: 13px 30px;
color: var(--white);
font-size: 15px;
font-weight: 800 !important;
line-height: 1.5;
text-align: center;
text-decoration: none;
background: var(--main);
border: 1px solid var(--main);
border-radius: 999px;
box-shadow: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
/* 「同意して確認画面へ」ボタン */
input[type="button"][value*="同意して確認画面"],
input[type="submit"][value*="同意して確認画面"],
button[value*="同意して確認画面"] {
min-width: 300px;
min-height: 58px;
padding: 16px 38px;
font-size: 17px;
font-weight: 800 !important;
}
/* ホバー */
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
color: var(--white);
background: var(--main-hover);
border-color: var(--main-hover);
box-shadow: none;
}
/* フォーカス */
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
button:focus-visible {
outline: 2px solid var(--main-dark);
outline-offset: 3px;
box-shadow: none;
}
/* 戻る・修正ボタン */
div.button_area input[type="button"][value*="戻る"],
div.button_area input[type="submit"][value*="戻る"],
div.button_area button[value*="戻る"],
div.button_area input[type="button"][value*="修正"],
div.button_area input[type="submit"][value*="修正"],
div.button_area button[value*="修正"] {
color: var(--main-dark);
background: var(--white);
border-color: var(--line);
font-weight: 800 !important;
}
div.button_area input[type="button"][value*="戻る"]:hover,
div.button_area input[type="submit"][value*="戻る"]:hover,
div.button_area button[value*="戻る"]:hover,
div.button_area input[type="button"][value*="修正"]:hover,
div.button_area input[type="submit"][value*="修正"]:hover,
div.button_area button[value*="修正"]:hover {
color: var(--white);
background: var(--main);
border-color: var(--main);
}
/* ===================================
必須項目
=================================== */
span.required {
display: inline;
margin-left: 12px;
padding: 0;
color: var(--required) !important;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
background: transparent;
border: 0;
vertical-align: baseline;
}
span.required::after {
content: "※必須";
color: var(--required) !important;
}
/* 必須項目についての説明 */
p.required_msg,
div.container p.required_msg {
margin: 0 0 16px;
padding: 0 10px;
color: var(--required) !important;
font-size: 13px;
font-weight: 700;
line-height: 1.8;
text-align: right;
background: transparent;
border: 0;
}
p.required_msg::after,
div.container p.required_msg::after {
content: "※必須項目は必ずご入力ください";
color: var(--required) !important;
}
/* ===================================
メールアドレス再入力メッセージ
=================================== */
p.label_mail,
div.container p.label_mail {
margin: 7px 0 4px;
color: var(--text) !important;
font-size: 13px;
font-weight: 700;
line-height: 1.8;
}
p.label_mail::after,
div.container p.label_mail::after {
content: "確認のため、もう一度メールアドレスを入力してください";
color: var(--text) !important;
font-weight: 700;
}
/* ===================================
通常の補足文
=================================== */
div.container p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
}
/* 通常のp指定より優先 */
div.container p.required_msg {
color: var(--required) !important;
}
div.container p.label_mail,
div.container p.value {
color: var(--text) !important;
}
/* ===================================
入力エラーメッセージ
=================================== */
div.message {
width: 100%;
max-width: 100%;
margin: 0 0 18px;
padding: 13px 15px;
color: var(--required);
font-size: 14px;
font-weight: 700;
line-height: 1.8;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
background: var(--required-bg);
border: 1px solid var(--required-line);
box-shadow: none;
}
div.message * {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
/* ===================================
公開終了メッセージ
=================================== */
div.finished-message {
width: 100%;
max-width: 100%;
margin: 0 0 18px;
padding: 13px 15px;
color: var(--required);
font-size: 14px;
font-weight: 700;
line-height: 1.8;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
background: var(--required-bg);
border: 1px solid var(--required-line);
box-shadow: none;
}
div.finished-message * {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
/* ===================================
個別エラーメッセージ
=================================== */
.error,
.errors,
.error_message,
.error-message,
.form-error,
.form_error,
.validate-error,
.validation-error,
.invalid-feedback,
label.error,
span.error,
p.error,
div.error,
ul.error,
ul.errors,
li.error {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 8px 0 0 !important;
padding: 0 !important;
color: var(--required) !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.7 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
/* 氏名欄内のエラーメッセージ */
td.value:has(span.label_name) .error,
td.value:has(span.label_name) .errors,
td.value:has(span.label_name) .error_message,
td.value:has(span.label_name) .error-message,
td.value:has(span.label_name) label.error,
td.value:has(span.label_name) span.error,
td.value:has(span.label_name) p.error,
td.value:has(span.label_name) div.error {
flex: 0 0 100%;
width: 100% !important;
}
/* ===================================
リンク
=================================== */
div.container a {
color: var(--main-dark);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
div.container a:hover,
div.container a:focus {
color: var(--main);
}
/* ===================================
横幅・折り返し対策
=================================== */
form,
div.container,
div.wrapper,
table.items,
table.items tbody,
tr.item,
td.label,
td.value,
td.comment,
div.button_area {
min-width: 0;
box-sizing: border-box;
}
td.label *,
td.value *,
td.comment * {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
td.label,
td.value,
td.comment {
overflow-wrap: anywhere;
word-break: normal;
}
/* ===================================
タブレット・スマートフォン
=================================== */
@media screen and (max-width: 767px) {
body {
font-size: 15px;
line-height: 1.8;
}
div.container {
width: 100%;
max-width: 100%;
padding: 0 12px 34px;
}
div.wrapper,
form,
table.items,
table.items tbody,
tr.item {
width: 100%;
max-width: 100%;
}
tr.item {
margin-bottom: 15px;
}
td.label {
float: none;
width: 100%;
max-width: 100%;
height: auto;
padding: 11px 8px 7px;
font-size: 15px;
}
td.value {
float: none;
width: 100%;
max-width: 100%;
padding: 11px 10px;
font-size: 15px;
}
td.comment {
float: none;
width: 100%;
max-width: 100%;
padding: 7px 10px 0;
font-size: 13px;
}
span.required {
margin-left: 8px;
font-size: 13px;
}
p.required_msg,
div.container p.required_msg {
padding: 0 8px;
font-size: 13px;
text-align: right;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea,
input[name="address"],
textarea[name="data_08"] {
width: 100% !important;
max-width: 100% !important;
font-size: 16px;
border-radius: 0;
}
/* スマートフォンの氏名欄 */
td.value:has(span.label_name) {
display: grid;
grid-template-columns:
auto minmax(0, 1fr)
auto minmax(0, 1fr);
align-items: center;
column-gap: 8px;
row-gap: 0;
white-space: normal;
}
td.value:has(span.label_name) br {
display: none;
}
td.value:has(span.label_name) span.label_name {
display: block;
margin: 0;
padding: 0;
white-space: nowrap;
}
td.value:has(span.label_name) input[type="text"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0;
margin: 0 !important;
}
td.value span.label_name + input[type="text"],
td.value span.label_name ~ input[type="text"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0;
margin-right: 0 !important;
}
td.value:has(span.label_name) .error,
td.value:has(span.label_name) .errors,
td.value:has(span.label_name) .error_message,
td.value:has(span.label_name) .error-message,
td.value:has(span.label_name) label.error,
td.value:has(span.label_name) span.error,
td.value:has(span.label_name) p.error,
td.value:has(span.label_name) div.error {
grid-column: 1 / -1;
width: 100% !important;
}
textarea[name="data_08"] {
height: 130px !important;
min-height: 130px;
}
div.button_area {
width: 100%;
max-width: 100%;
margin: 28px auto 18px;
gap: 10px;
}
input[type="button"],
input[type="submit"],
button {
width: 100%;
min-width: 0;
min-height: 50px;
padding: 13px 20px;
font-size: 15px;
font-weight: 800 !important;
}
input[type="button"][value*="同意して確認画面"],
input[type="submit"][value*="同意して確認画面"],
button[value*="同意して確認画面"] {
width: 100%;
min-width: 0;
min-height: 58px;
padding: 16px 20px;
font-size: 16px;
font-weight: 800 !important;
}
}
/* ===================================
小型スマートフォン
=================================== */
@media screen and (max-width: 479px) {
div.container {
padding: 0 10px 30px;
}
td.label {
padding: 11px 6px 7px;
}
td.value {
padding: 11px 8px;
}
td.comment {
padding: 7px 8px 0;
}
span.required {
margin-left: 6px;
}
p.required_msg,
div.container p.required_msg {
padding: 0 6px;
}
td.value:has(span.label_name) {
grid-template-columns: auto minmax(0, 1fr);
row-gap: 8px;
}
td.value:has(span.label_name) span.label_name:nth-of-type(2) {
grid-column: 1;
}
}
/* ===================================
動きを抑える設定
=================================== */
@media (prefers-reduced-motion: reduce) {
input,
select,
textarea,
button {
transition: none;
}
}
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。