設問にご回答くださった方は、外国人向け社内研修動画ご依頼前のチェックリストをご覧いただけます。
/* ===== 2カラー版（#595478 / #BFBFDC） ===== */
/* コンテナ */
div.container {
max-width: 960px;
width: 100%;
margin: 24px auto;
background: #ffffff;
border: 2px solid #595478; /* 濃色ボーダー */
border-radius: 12px;
padding: 20px;
}
/* ラベルセル（横幅固定・折返し禁止） */
td.label {
width: 200px;
padding: 12px;
font-size: 18px;
font-weight: 700;
color: #ffffff; /* 白文字 */
background: #595478; /* 濃色 */
white-space: nowrap;
vertical-align: middle;
border-right: 2px solid #ffffff;
}
/* 入力セル（残り幅を使用） */
td.value {
padding: 12px;
width: auto;
background: #F4F4FA; /* 明色を薄めた下地（読みやすさ優先） */
}
/* 入力欄（セル幅いっぱい） */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
width: 100%;
max-width: 100%;
font-size: 18px;
padding: 10px 12px;
min-height: 44px;
border: 1.5px solid #595478; /* 濃色の枠 */
border-radius: 8px;
box-sizing: border-box;
background-color: #ffffff;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* フォーカス時（同系2色で完結） */
input:focus,
textarea:focus,
select:focus {
border-color: #595478;
box-shadow: 0 0 0 3px rgba(191,191,220,0.65); /* 明色のグロー */
outline: none;
background-color: #FBFBFE; /* ほんのり明るく */
}
/* 確認用メールラベル */
.confirm-label {
font-size: 18px;
font-weight: 700;
color: #595478; /* 濃色 */
margin-bottom: 6px;
}
/* 送信ボタン（2色だけで表現） */
input[type="submit"],
button[type="submit"] {
font-size: 18px;
font-weight: 700;
padding: 12px 22px;
min-height: 46px;
color: #ffffff;
background: #595478; /* 濃色ベタ */
border: 1.5px solid #595478;
border-radius: 10px;
cursor: pointer;
transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
background: #4F4A6F; /* 濃色を少し暗く */
box-shadow: 0 8px 18px rgba(89,84,120,0.25);
transform: translateY(-1px);
}
input[type="submit"]:active,
button[type="submit"]:active {
transform: translateY(0);
}
/* 補足：テーブル余白 & 見出しの視認性を少しUP */
table.items { width: 100%; border-collapse: separate; border-spacing: 0; }
td.label, td.value { border-bottom: 1px solid #E6E7F1; }
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。