/* ===================================
基本設定
=================================== */
:root {
--main: #002063;
--main-dark: #001647;
--main-hover: #173d78;
--main-light: #eef2f8;
--bg: #f8fafc;
--bg-soft: #eef3f8;
--text: #2b2b2b;
--muted: #666666;
--line: #dddddd;
--white: #ffffff;
--required: #c83b3b;
--required-bg: #fff4f4;
}
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;
}
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);
}
div.container p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
}
/* ===================================
設問エリアのレイアウト
=================================== */
table.items {
display: block;
width: 100%;
max-width: 100%;
border: 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%;
padding: 12px 14px;
color: var(--text);
font-size: 15px;
line-height: 1.8;
background: var(--bg);
border: 1px solid #ececec;
box-shadow: none;
}
/* 説明文 */
td.comment {
display: block;
float: none;
width: 100%;
max-width: 100%;
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 #bcbcbc;
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;
}
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: nowrap;
gap: 8px;
width: 100%;
max-width: 100%;
white-space: nowrap;
}
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;
}
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"] {
width: 260px !important;
max-width: 260px !important;
margin-right: 12px;
vertical-align: middle;
}
td.value span.label_name + input[type="text"] {
width: 260px !important;
max-width: 260px !important;
margin-right: 12px;
}
/* フォーカス時 */
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="radio"],
input[type="checkbox"] {
margin: 0 6px 0 0;
vertical-align: middle;
accent-color: var(--main);
}
/* ===================================
ボタンの表示エリア
=================================== */
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: 0;
border-radius: 999px;
box-shadow: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition:
background-color 0.2s ease,
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;
box-shadow: none;
}
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
color: var(--white);
background: 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"]:first-child:not(:only-child),
div.button_area button:first-child:not(:only-child) {
color: var(--main-dark);
background: var(--white);
border: 1px solid var(--line);
font-weight: 800 !important;
box-shadow: none;
}
div.button_area input[type="button"]:first-child:not(:only-child):hover,
div.button_area button:first-child:not(:only-child):hover {
color: var(--white);
background: var(--main);
border-color: var(--main);
box-shadow: none;
}
/* ===================================
必須項目のマークおよびメッセージ
=================================== */
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.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: break-word;
background: var(--required-bg);
border: 1px solid #f0cccc;
box-shadow: none;
}
div.message * {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* 公開終了メッセージ */
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: break-word;
background: var(--required-bg);
border: 1px solid #f0cccc;
box-shadow: none;
}
div.finished-message * {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* ===================================
リンク・補足文
=================================== */
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-hover);
}
/* ===================================
横幅・折り返し対策
=================================== */
form,
div.wrapper,
table.items,
table.items tbody,
tr.item,
td.label,
td.value,
td.comment,
div.button_area {
max-width: 100%;
min-width: 0;
}
td.label *,
td.value *,
td.comment * {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.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-right: 0 !important;
margin-left: 0 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
td.value .error,
td.value .errors,
td.value label.error,
td.value span.error,
td.value p.error,
td.value div.error {
clear: both !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 8px !important;
color: var(--required) !important;
font-size: 13px !important;
line-height: 1.7 !important;
}
td.value label {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* ===================================
タブレット・スマートフォン
=================================== */
@media screen and (max-width: 767px) {
body {
font-size: 15px;
line-height: 1.8;
}
div.container {
width: 100% !important;
max-width: 100% !important;
padding: 0 12px 34px;
}
div.wrapper,
table.items,
table.items tbody,
tr.item {
width: 100% !important;
max-width: 100% !important;
}
tr.item {
margin-bottom: 15px;
}
td.label {
float: none;
width: 100% !important;
height: auto;
padding: 11px 8px 7px;
font-size: 15px;
}
td.value {
float: none;
width: 100% !important;
padding: 11px 10px;
font-size: 15px;
}
td.comment {
float: none;
width: 100% !important;
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;
margin-right: 0 !important;
}
textarea[name="data_08"] {
height: 130px !important;
min-height: 130px;
}
div.button_area {
width: 100% !important;
max-width: 100% !important;
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;
box-shadow: none;
}
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;
box-shadow: none;
}
}
@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;
}
}
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。