設問にご回答くださった方は、マニュアル作成のプロが使う“テクニカルライティング”とはをご覧いただけます。
/* ===== 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サイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。