/* =================================== 基本設定 =================================== */ 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: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", 'Hiragino Sans', Meiryo, Helvetica, Arial, sans-serif; } select, input, button, textarea { "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", 'Hiragino Sans', Meiryo, Helvetica, Arial, sans-serif; } input[type="text"], textarea { font-size: 71%; width: 100%; padding: 10px; border-radius: 8px; box-shadow: none; border: none; margin-bottom: 10px; background: #fff; } select { font-size: 71%; width: 100%; padding: 10px; box-shadow: none; border: none; background: #fff; } textarea { min-height: 3em; } textarea { resize: none; } /* selectbox */ .select_wrap { overflow: hidden; width: 100%; margin-bottom: 10px; } .select_wrap select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: none; outline: none; background: transparent; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .select_wrap select::-ms-expand { display: none; } .select_wrap { position: relative; border-radius: 8px; background: #ffffff; } .select_wrap::before { position: absolute; top: 0.5em; right: 0.4em; width: 8px; height: 8px; -webkit-transform: rotate(45deg) translateY(50%); transform: rotate(45deg) translateY(50%); transform: rotate(45deg) translateY(50%); border-right: solid 2px #aaa; border-bottom: solid 2px #aaa; content: ''; pointer-events: none; } ..select_wrap select { padding: 8px 38px 8px 8px; color: #666666; } @media all and (-ms-high-contrast: none) { .select_wrap::before { position: absolute; top: 0.8em; } } /* =================================== 画面全体のレイアウト =================================== */ /* 画面全体の表示設定 */ body { background: WhiteSmoke; /* 背景色 */ text-align: center; /* フォームエリアを中央に表示 */ } /* フォームエリア全体の設定 */ div.container { display: inline-block; } /* スクロールバー非表示 */ .mailcontainer { height: 150px; overflow: hidden; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; /* Firefox 対応 */ } .mailcontainer::-webkit-scrollbar { /* Chrome, Safari 対応 */ display: none; } /* =================================== 設問エリアのレイアウト =================================== */ /* 設問エリア全体の設定 */ div.wrapper { width: 100%; /* 画面の横幅 */ margin: 0; /* 中央に表示 */ background: transport; } /* 設問の表 */ table.items { border: none; background-color: transparent; display: block; width: 100%; max-width:528px; margin: 0 auto; } /* 設問の行 */ tr.item {} /* 必要であれば行のデザインを設定することができます */ /*設問名のセルのデザイン */ td.label { width: 30%; /* 実際の設問名の文字の長さに合わせて調整してください */ padding: 6px; text-align: left; font-size: 14px; font-weight: bold; vertical-align: top; /* ラベルの配置 セルの上部に表示したい場合は top */ background: transparent; } tr:last-of-type td.label { color: transparent; color: #333; } /* 設問の入力セルおよび表示セルのデザイン */ td.value.ascii { width: 100%; /* 入力コントロールの幅に合わせて調整してください */ border: 0px solid #fff; padding: 10px; margin: 5px; vertical-align: middle; background: transparent; color: #fff; margin: 0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } ::placeholder { font-size: 0.8em; position: relative; bottom: 2px; } td.value { width: 70%; color: #333; } /* チェックボックスの見た目設定 */ input[type=checkbox] { background-color: #fff; color: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-right: 5px; } .label_name { max-width: 100px; color: #ffffff; } input[name="person_name_first"] { width: 49%; /* 入力コントロールの幅に合わせて調整してください */ padding: 10px; vertical-align: middle; background-color: #fff; color: #000; margin: 0 0 10px 1%; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } input[name="person_name_last"] { width: 49%; /* 入力コントロールの幅に合わせて調整してください */ padding: 10px; vertical-align: middle; background-color: #fff; color: #000; margin: 0 1% 10px 0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } p.label_mail { font-size: 13px!important; margin: 0 0 2px 28px!important; color: #fff!important; font-weight: normal; } /* 設問の入力例/説明セルのデザイン */ td.comment, { font-size: 12px; display: none; color: DarkSlateGray; background: transparent; } select:focus, textarea:focus { background: #fff; } /* 入力セルの「氏」「名」の文字のデザイン */ span.label_name { background: transparent; padding-right: 5px; font-size: 14px; font-weight: bold; color: #fff; border-radius: 8px; box-sizing: border-box; margin-left: 10px; position: relative; bottom: 9px; } /* 入力確認画面、完了画面の入力された文字のデザイン */ p.value { font-size: 14px; color: #333; margin-left: 20px; text-align: left; } /* ボタンの表示エリアの設定 */ div.button_area { text-align: right; /* 中央にボタンを表示 */ width: 100%; } /* #lf_form_submit_button { float: right; width: 57%; margin-right: 15%; }*/ #button_confirm_back, #button_confirm_submit { width: 47%; } #button_confirm_submit { margin-left: 10px; } #frm_formconfirm .button_area { margin-top: 25px; } /* 入力エラーメッセージのデザイン */ div.message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 30px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size: 14px; font-weight: bold; color: #E70612; background: #ffffff; display: none; } /* 公開終了メッセージのデザイン */ div.finished-message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size: 14px; font-weight: bold; color: Crimson; background: MistyRose; } /* 入力完了メッセージのデザイン */ .done_text_area { margin: 20px 0 40px 0; } .done_text { font-weight: bold; font-size: 16px; line-height: 1.3; display: block; } /* =================================== 入力コントロールのデザイン =================================== */ /* 確認／送信／戻る／登録ボタン */ input[type=button] { font-size: 16px; background: #0883B8; /* ボタンの色 */ padding: 10px 5px; /* ボタンの文字の 上 右 下 左 の隙間のサイズ */ /* 確認画面に表示される2つのボタンの左右の余白サイズ */ border: none; /* ボタンに枠線をつけたい場合は、ここを設定してください */ color: #fff; /* 文字の色 */ font-weight: bold; border-radius: 8px; width: 70%; -webkit-appearance: none; } /* IE */ @media all and (-ms-high-contrast: none) { input[type=button] { padding: 10px 5px 6px 5px; } } input[type=button]:hover { cursor: pointer; } /* 入力中のフィールドの背景色 */ /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */ input[type="text"]:focus { background-color: #44; } /* テキストボックス */ select:focus { background-color: LightYellow; } /* プルダウン */ textarea:focus { background-color: LightYellow; } /* テキストエリア */ /* =================================== 必須項目のマークおよびメッセージなど =================================== */ /* 必須項目のマーク */ span.required { float: right; margin-right: 4px; font-size: 0%; font-weight: bold; color: OrangeRed; } span.required:after { /* ここを編集することで表示されるマークを変更できます */ content: ""; } /* 必須項目についての説明文 */ p.required_msg { text-align: right; margin-right: 4px; font-size: 80%; font-weight: bold; color: #E70612; } p.required_msg:after { /* ここを編集することで表示されるマークを変更できます */ content: ""; } /* メールアドレスの再入力メッセージ */ p.label_mail { margin: 5px 0 1px 0; font-size: 85%; font-weight: bold; color: DarkSlateGray; } p.label_mail:after { /* ここを編集することで表示されるメッセージを変更できます */ content: "確認のため、もう一度メールアドレスを入力してください"; } .privacy_policy { display: none; } .privacy-text-master { display: none; } /* 横スクロール */ overflow-x: hidden; input[type="text"] { font-size: 100%; width: 100%; padding: 10px; border-radius: 8px; box-shadow: none; border: none; } /* =================================== スマートフォン表示用のレイアウト =================================== */ /* スマートフォンとして認識する画面の横幅のサイズ */ /* iPhoneX 横 ---------------------------------------------------------------*/ @media (min-width: 812px) and (max-width: 959px) { .button_area { width: 100%; display: block; } #lf_form_submit_button { width: 62%; margin-right: 5%; } } /* iPad　縦 ---------------------------------------------------------------*/ @media (min-width: 737px) and (max-width: 811px) {} /* iPhone6,7,8Plus　横 ---------------------------------------------------------------*/ @media (min-width: 668px) and (max-width: 736px) {} /* iPhone6,7,8,Pixel 横 ---------------------------------------------------------------*/ @media (min-width: 641px) and (max-width: 667px) {} /* 小型スマホ 横 ---------------------------------------------------------------*/ @media (min-width: 560px) and (max-width: 640px) {} /* iPhone6,Android 縦 ---------------------------------------------------------------*/ @media screen and ( max-width:559px) { body { background: transparent; /* 背景色 */ text-align: center; /* フォームエリアを中央に表示 */ width: 100%; } div.container { width: 98%; /* 画面の横幅 */ background: transparent; /* 背景色 */ border: Gainsboro 0px solid; border-top: none; /* 外枠のラインの色と太さ */ font-size: 14px; /* フォントの初期サイズ */ /* フォントの初期カラー */ margin: 0; /* 画面の中央に表示 */ text-align: left; /* 左寄せ */ } .items th, .items td { border-bottom: none; display: block; width: 100%; } /*設問名のセルのデザイン */ td.label { float: left; height: 35px; text-align: left; position: relative; top: 5px; } td.label:last-child { color: transparent; } /* 必須項目のマーク */ span.required { float: initial; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { float: left; padding-bottom: 0px; color: #333; vertical-align: middle; width: 100%; } /* 設問の入力例/説明セルのデザイン */ td.comment { display: none; } /* span.label_name { display:none; } */ tr:third-of-type span.label_name { width: 39%; float: left; } /* 設問の入力例/テキストボックス */ input[type="text"], select, textarea { font-size: 95%; width: 100%; padding: 13px; border-radius: 8px; box-shadow: none; border: none; } /* 設問の入力例/テキストエリア */ textarea { height: 100px; padding-left: 10px; vertical-align: middle; } /* 入力セルの「氏」「名」の文字のデザイン */ span.label_name { background: transparent; padding-right: 5px; font-size: 100%; font-weight: bold; color: #ffffff; border-radius: 8px; box-sizing: border-box; vertical-align: super; position: relative; top: 10px; } input[name="person_name_last"], input[name="person_name_first"] { width: 49%; /* 入力コントロールの幅に合わせて調整してください */ text-align: left; padding: 13px; margin-left: 5px; vertical-align: middle; background-color: #fff; color: #000; margin: 0 0 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } input[name="person_name_first"] { margin-left: 5px; } /* ボタンの表示エリアの設定 */ div.button_area { /* margin:10px auto 10px auto; */ /* 中央に表示、上下に10pxの余白 */ /* padding:10px 10px 10px 0; */ /* ボタンとの上下の隙間のサイズ */ text-align: center; /* 中央にボタンを表示 */ width: 100%; display: flex; } #lf_form_submit_button { width: 100%; margin-top: 20px; } #button_confirm_back, #button_confirm_submit { margin-top: 15px; } input[type=button] { font-size: 16px; background: #0883B8; padding: 2px 30px 2px 30px; border: none; color: #fff; font-weight: bold; border-radius: 8px; height: 40px; -webkit-appearance: none; } tr.item:third-of-type td.value { width: 100%; margin-left: 6px; } .privacy_policy { display: none; } /* 入力エラーメッセージのデザイン */ div.message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 30px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size: 12px; font-weight: bold; color: #E70612; background: #ffffff; } /* 公開終了メッセージのデザイン */ div.finished-message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size: 12px; font-weight: bold; color: #c00; background: #ffffff; } #button_confirm_back, #button_confirm_submit { width: 49%; } /* 入力完了メッセージのデザイン */ .done_text_area { width: 100%; text-align: center; margin: 5px 0 20px 0; } .done_text { font-size: 15px; line-height: 1.4; } ::placeholder { font-size: 1.0em; position: relative; bottom: 0; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select_wrap::before { position: absolute; top: 0.8em; } } @media screen and ( max-width:320px) { input[type=button] { font-size: 13px; padding: 0; } } tr#item_6 { text-align: left; font-size: 1.4rem; } input.last_input { margin-bottom: 10px; } ul.value_list li { display: inline-block; width: 33%; } @media screen and ( max-width:559px) { ul.value_list li { display: inline-block; width: 100%; margin-left: 5px; } }