/* =================================== 基本設定 =================================== */ 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; } /* =================================== 共通 =================================== */ /* フォント */ body { /*font-family: Verdana, Roboto, 'Droid Sans', Meiryo, 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;*/ } select, input, button, textarea { font-family: Verdana, Roboto, 'Droid Sans', Meiryo, 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic ProN', sans-serif; } /* =================================== 画面全体のレイアウト =================================== */ /* 画面全体の表示設定 */ body { background: WhiteSmoke; /* 背景色 */ text-align: center; /* フォームエリアを中央に表示 */ } /* フォームエリア全体の設定 */ div.container { max-width: 960px; /* 画面の横幅 */ background: white; /* 背景色 */ /*border: Gainsboro 2px solid;*/ border-top: none; /* 外枠のラインの色と太さ */ font-size: 14px; /* フォントの初期サイズ */ color: #333; /* フォントの初期カラー */ margin: 0 auto; /* 画面の中央に表示 */ text-align: left; /* 左寄せ */ padding: 80px 5vw; } div.container, div.container *, div.container *::before, div.container *::after { box-sizing: border-box; } /* =================================== 設問エリアのレイアウト =================================== */ /* 設問エリア全体の設定 */ div.wrapper { width: 100%; /* 画面の横幅 */ margin: 0 auto; /* 中央に表示 */ background: white; } /* 設問の表 */ table.items { border: none; width: 100%; } /* 設問の行 */ tr.item { display: block; padding: 1em 0; border-bottom: 1px solid #ddd; } /* 必要であれば行のデザインを設定することができます */ /*設問名のセルのデザイン */ td.label { display: block; width: 100%; font-size: 14px; font-weight: 700; margin-bottom: 5px; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { display: block; width: 100%; } /* 設問の入力例/説明セルのデザイン */ td.comment { display: block; width: 100%; font-size: 13px; padding: 10px 0 0; color: #777; } td.comment:empty { padding: 0; } /* 入力セルの「氏」「名」の文字のデザイン */ span.label_name { padding-right: .5em; font-weight: 400; } /* 入力確認画面、完了画面の入力された文字のデザイン */ p.value { font-size: 110%; } /* ボタンの表示エリアの設定 */ div.button_area { text-align: center; margin-top: 30px; } /* 入力エラーメッセージのデザイン */ div.message { padding: 1em; /* メッセージテキストと背景色の隙間のサイズ */ margin: 0 0 20px; /* 上 右 下 左 の隙間のサイズ */ font-size: 14px; font-weight: bold; color: #D52501; background: #fff8d9; } /* 公開終了メッセージのデザイン */ div.finished-message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size: 14px; font-weight: bold; color: Crimson; background: MistyRose; } /* =================================== 入力コントロールのデザイン =================================== */ input[type="text"], select, textarea { border: 1px solid #999; border-radius: 2px; padding: 8px; } input[type="text"], select { height: 40px; min-width: 200px; } textarea { width: 100%; } input[type="radio"] { margin: 10px 5px 14px 0; } /* 確認／送信／戻る／登録ボタン */ input[type=button] { border: none; font-family: inherit; font-size: 18px; font-weight: 700; background: #467B8B; border-radius: 4px; color: #fff; padding: 10px 40px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .24); transition: filter .3s; } input[type=button]:hover { cursor: pointer; filter: brightness(1.1); } /* 入力中のフィールドの背景色 */ /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */ input[type="text"]:focus { background-color: MintCream; } /* テキストボックス */ select:focus { background-color: MintCream; } /* プルダウン */ textarea:focus { background-color: MintCream; } /* テキストエリア */ /* =================================== 必須項目のマークおよびメッセージなど =================================== */ /* 必須項目のマーク */ span.required { margin-left: 1em; font-size: 12px; color: #D52501; } span.required:after { /* ここを編集することで表示されるマークを変更できます */ content: "※必須"; } /* 必須項目についての説明文 */ p.required_msg { color: #D52501; } p.required_msg:after { /* ここを編集することで表示されるマークを変更できます */ content: "「※必須」となっている項目は必ず入力してください。"; } /* メールアドレスの再入力メッセージ */ p.label_mail { margin: 15px 0 5px; line-height: 1.4; } p.label_mail:after { /* ここを編集することで表示されるメッセージを変更できます */ content: "確認のため、もう一度メールアドレスを入力してください"; } /* =================================== スマートフォン表示用のレイアウト =================================== */ /* スマートフォンとして認識する画面の横幅のサイズ */ @media screen and (max-width:767px) { input[type=button] { font-size: 16px; } /* フォームエリア全体の設定 */ div.container { width: 100%; padding: 40px 15px; } /* 設問エリア全体の設定 */ div.wrapper { width: 100%; } /*設問名のセルのデザイン */ td.label {} /* 設問の入力セルおよび表示セルのデザイン */ td.value { /* 入力コントロールの幅に合わせて調整してください */ padding-bottom: 0px; } /* 設問の入力例/説明セルのデザイン */ td.comment {} /* 設問の入力例/テキストボックス */ input[type="text"] { font-size: 14px; width: 100% !important; min-width: initial; } /* 設問の入力例/テキストエリア */ textarea { height: 100px; } /* ボタンの表示エリアの設定 */ div.button_area {} } /* 別CSSの上書き ========================================= */ .wrap { max-width: 100%; } .headerWrap .innerWrap #headerLogo>p { height: auto; } /* ヘッダーエリア ========================================= */ .lp-form-heading { font-size: 32px; font-weight: 400; text-align: center; border: none; padding: 0; margin: 0 0 1em 0; } @media screen and (max-width:767px) { .lp-form-heading { font-size: 24px; } } /* =================================== フォームテンプレート用スタイル =================================== */ body { background: #fff !important; } #frm_forminput { position: relative; } .form-page-header { position: absolute; top: 0; left: 0; } .form-page-header__logo img{ width: 150px; } #frm_forminput div.container { padding-top: 160px; /* ヘッダー表示エリアを確保 */ padding-bottom: 160px; /* フッター表示エリアを確保 */ } .form-page-footer { position: absolute; bottom: 0; left: 0; width: 100%; background: #333; } .form-page-footer__copyright { color:#ccc; font-size: 12px; padding: 20px; text-align: center; } .inquiry-thanks__txt1 { font-size: 20px; font-weight: bold; margin: 0; } .pc-align--c { text-align: center !important; } @media screen and (max-width: 767px) { .form-page-header__logo img{ width: 75px; } #frm_forminput div.container { padding-top: 100px; /* ヘッダー表示エリアを確保 */ padding-bottom: 100px; /* フッター表示エリアを確保 */ } .form-page-footer__copyright { font-size: 10px; padding: 15px; } .sp-align--l { text-align: left !important; } }