ホンヤク社 オンラインセミナー アーカイブ視聴申込フォーム
AIでも効果は実証！翻訳前に原文リライトのススメ
/* ===== 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;
}
/* ===== 送信ボタン（同意して確認画面へ）だけ調整：中央揃え・大型・色付き ===== */
input[type="submit"],
button[type="submit"] {
display: block; /* 中央寄せのため block */
margin: 32px auto 16px; /* 中央揃え */
font-size: 22px; /* 文字サイズUP */
font-weight: 800;
padding: 18px 48px; /* 大型化 */
min-height: 64px;
color: #ffffff;
background: #595478; /* 濃色ベタ（基調色） */
border: 2px solid #595478;
border-radius: 14px;
cursor: pointer;
box-shadow: 0 10px 22px rgba(89,84,120,0.35);
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 14px 30px rgba(89,84,120,0.45);
transform: translateY(-2px);
}
input[type="submit"]:active,
button[type="submit"]:active {
transform: translateY(0);
box-shadow: 0 8px 18px rgba(89,84,120,0.35);
}
/* 補足：テーブル余白 & 見出しの視認性を少しUP */
table.items { width: 100%; border-collapse: separate; border-spacing: 0; }
td.label, td.value { border-bottom: 1px solid #E6E7F1; }
/* 文言ベースで中央揃え（最終手段） */
input[value*="確認"]{
margin-left: auto;
margin-right: auto;
display: block;
}
/* ===== 確認ボタンを気持ち小さく ===== */
input[value*="確認"]{
font-size: 20px; /* 22 → 20 に */
padding: 16px 38px; /* 少しだけ詰める */
min-height: 58px; /* 高さも控えめに */
}
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。