ダイバーシティ推進が陥る課題と解決策
～数値目標に縛られないために必要なこと～　お申込みフォーム

/* =================================== 基本設定 =================================== */ @import url(//fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap); html{ overflow-y:scroll; } 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 { margin: 0; padding: 0; font-weight: normal; font-style: normal; } li { list-style: none; } /* 全ての要素のbox-sizingをデフォルトでborder-boxにする */ :root { -webkit-box-sizing: border-box; box-sizing: border-box; } *, ::before, ::after { border-width: 0; border-style: solid; -webkit-box-sizing: inherit; box-sizing: inherit; } /* =================================== 共通 =================================== */ /* フォント */ body { font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif; } select,input,button,textarea { font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif; } /* =================================== 画面全体のレイアウト =================================== */ /* 画面全体の表示設定 */ html { font-size: 62.5%; } body { overflow: hidden; color:#333; font-size: 16px; font-size: 1.6em; letter-spacing: 0.11em; line-height: 1.5; background: #ffffff none; } /* フォームエリア全体の設定 */ .container { margin: 0 auto; } div.header { width: 100%; padding: 24px 0; -webkit-box-shadow: 0 3px 4px -4px rgba(0, 0, 0, 0.4); box-shadow: 0 3px 4px -4px rgba(0, 0, 0, 0.4); } .fb-header { width: 960px; margin: 0 auto; text-align: left; } .fb-header img { position: static !important; width: 30%; max-width: 220px; } .fb-title { padding: 2% 2%; font-size: 24px; line-height: 1.5; font-weight: bold; text-align: center; } #privacy_policy { width: 100%; margin: 0 auto; padding: 24px 3%; } div.footer { width: 100%; padding: 16px 0; background: #3b4043 none; } .copyright { color: #ffffff; text-align: center; } @media screen and (min-width: 768px),print { #privacy_policy { max-width: 620px; } } /* =================================== 設問エリアのレイアウト =================================== */ /* 設問エリア全体の設定 */ div.wrapper { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 3%; } table.items, tbody, tr.item { display: block; width: 100%; max-width: 980px; } /* 設問の表 */ table.items{ border-top: 1px solid #cccccc; } /* 設問の行 */ tr.item { padding: 0 0 8%; border-bottom: 1px solid #cccccc; } /*設問名のセルのデザイン */ td.label { display: block; width: 100%; padding: 2%; font-weight: bold; background: #edf8fd none; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { display: block; width: 100%; padding: 4% 0; } /* 設問の入力例/説明セルのデザイン */ td.comment { display: block; width: 100%; color: #777777; } @media screen and (min-width: 768px),print { table.items, tbody, tr.item { display: table; border-collapse: collapse; } /* 設問の行 */ tr.item { padding: 0; } /*設問名のセルのデザイン */ td.label { display: table-cell; width: 35%; max-width: 300px; padding: 20px; vertical-align: top; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { display: block; width: 100%; margin: 0; padding: 10px 20px 5px; } /* 設問の入力例/説明セルのデザイン */ td.comment { display: block; width: 100%; margin: 0; padding: 0 20px 10px; font-size: 14px; font-size: 1.4rem; } } /* 入力セルの「氏」「名」の文字のデザイン */ span.label_name { padding-right:5px; } tr#item_3 td.value { display: inline-block; } tr#item_3 td.value input { width: 40%; } tr#item_3 td.value input:first-of-type { margin-right: 3% } .ex_last_name { display: inline-block; width: 52%; } .ex_first_name { display: inline-block; width: 48%; } @media screen and (min-width: 768px),print { tr#item_3 td.value input { width: 43.2%; } } /* 入力確認画面、完了画面の入力された文字のデザイン */ p.value { } /* ボタンの表示エリアの設定 */ div.button_area { width: 100%; max-width: 980px; margin: 0 auto 100px; padding: 0 3%; text-align:center; } /* 入力エラーメッセージのデザイン */ div.message { width: 100%; max-width: 900px; margin: 0 auto 4%; padding: 3%; border: 3px solid #d63008; color: #d63008; font-weight: bold; line-height: 2; background:#FFF0E5; } /* 公開終了メッセージのデザイン */ div.finished-message { padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */ font-weight:bold; color:Crimson; background:MistyRose; } /* =================================== 入力コントロールのデザイン =================================== */ /* !iOS Reset ---------------------------------------------------------- */ input[type="submit"], input[type="button"], input[type="submit"].disabled, input[type="button"].disabled { border: none; border-radius: 0; appearance: button; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; } input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration, input[type="submit"].disabled::-webkit-search-decoration, input[type="button"].disabled::-webkit-search-decoration { display: none; } input[type="submit"]::focus, input[type="button"]::focus, input[type="submit"].disabled::focus, input[type="button"].disabled::focus { outline-offset: -2px; } /* !IE11 Reset ---------------------------------------------------------- */ select::-ms-expand { display: none; } /* !default ---------------------------------------------------------- */ input[type="text"], input[type="number"], input[type="tel"], input[type="email"], textarea { width: 100%; padding: 5px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #777777; border-radius: 2px; font-size: 16px; font-size: 1.6rem; } select { width: 100%; padding: 10px 1em 12px 5px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #777777; border-radius: 5px; font-size: 16px; font-size: 1.6rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* focus */ input:focus, select:focus, textarea:focus { margin: -2px 0 0 0; border-width: 2px 2px 2px 2px; border-style: solid; border-color: #000000; background: #FFFFE5 none; } input[type="submit"]:focus { margin: 0 auto; border-width: 0; } /* !ラジオボタン ---------------------------------------------------------- */ input[type="radio"] { margin: 1em 1.3em 1.3em 1em; transform:scale(2.0); } /* !チェックボックス ---------------------------------------------------------- */ input[type="checkbox"] { margin: 0 1em 1.3em 10px; transform:scale(2.0); } /* 確認／送信／戻る／登録ボタン */ input[type=button] { width: 280px; height: 50px; margin: 0px 10px 0px 10px; padding: 4px 20px 4px 20px; border: 1px solid #ffffff; border-radius: 50px; font-size: 18px; font-weight:bold; -webkit-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } input[type=button]:hover { cursor: pointer; } input[type=button]#lf_form_submit_button { color: #ffffff; background-image: -webkit-gradient(linear, right top, left top, from(#429fe3), color-stop(51%, #417dc3), to(#429fe3)); background-image: -o-linear-gradient(right, #429fe3 0%, #417dc3 51%, #429fe3 100%); background-image: linear-gradient(270deg, #429fe3 0%, #417dc3 51%, #429fe3 100%); background-position: left center; background-size: 200% auto; } input[type=button]#lf_form_submit_button:hover { background-position: right center; } /* 入力中のフィールドの背景色 */ /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */ input[type="text"]:focus { background-color:LightYellow; } /* テキストボックス */ select:focus { background-color:LightYellow; } /* プルダウン */ textarea:focus { background-color:LightYellow; } /* テキストエリア */ /* =================================== 必須項目のマークおよびメッセージなど =================================== */ /* 必須項目のマーク */ span.required { margin-left: 0.5em; padding: 2px 3px; color:#ffffff; font-size: 13px; font-weight: bold; background: #d63008 none; } span.required:after { /* ここを編集することで表示されるマークを変更できます */ content:"必須"; } /* 必須項目についての説明文 */ p.required_msg { display: none; /* text-align:right; margin-right:4px; font-weight:bold; color:OrangeRed; */ } p.required_msg:after { /* ここを編集することで表示されるマークを変更できます */ content:"「※必須」となっている項目は必ず入力してください。"; } /* メールアドレスの再入力メッセージ */ p.label_mail { margin:5px 0 1px 0; font-weight:bold; color:DarkSlateGray; } p.label_mail:after { /* ここを編集することで表示されるメッセージを変更できます */ content:"確認のため、もう一度メールアドレスを入力してください"; }