@charset "UTF-8"; @import url("http://www.jqa.jp/common/css/style.css"); /* =================================== 共通 =================================== */ /* =================================== 画面全体のレイアウト =================================== */ /* 画面全体の表示設定 */ body { background:; /* 背景色 */ text-align:; /* フォームエリアを中央に表示 */ } /* フォームエリア全体の設定 */ div.container { width:100%; background:#fff; /* 背景色 */ border /* 外枠のラインの色と太さ */ font-size:; /* フォントの初期サイズ */ color:#333; /* フォントの初期カラー */ margin:0 auto; /* 画面の中央に表示 */ text-align:left; /* 左寄せ */ } /* =================================== 設問エリアのレイアウト =================================== */ /* 設問エリア全体の設定 */ div.wrapper { width:; /* 画面の横幅 */ margin:0 auto; /* 中央に表示 */ background:#fff; } /* 設問の表 */ table.items { width:100%; border-left:#d5d5d5 1px solid; } /* 設問の行 */ tr.item {} /* 必要であれば行のデザインを設定することができます */ /*設問名のセルのデザイン */ td.label { width:20%; /* 実際の設問名の文字の長さに合わせて調整してください */ padding:10px; padding-right:0; color:#333; font-weight:bold; vertical-align:middle; /* ラベルの配置 セルの上部に表示したい場合は top */ background:#f2f2f2; border-top:#d5d5d5 1px solid; border-bottom:#d5d5d5 1px solid; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { width:; /* 入力コントロールの幅に合わせて調整してください */ padding:10px; line-height: 1.8; /*★「line-height: 1.8; 」★*/ border:#d5d5d5 1px solid; background:#ffffff; } /* 設問の入力例/説明セルのデザイン ★30%→20%に変更★ */ /* テーブルの一番右にある。表示していない */ td.comment { width:20%; font-size:12px; padding-left:10px; color:#666; background:#fff; } /* 入力欄の枠の高さ、線 （幅は修正不可）※「同意」ボタン（input）と連動するので注意ー川瀬　*/ textarea { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "MS Pゴシック", sans-serif; font-weight:normal; width:85%; padding:10px; border:#d5d5d5 1px solid; } input[type=text]{ padding:5px 10px; vertical-align:bottom; border:#d5d5d5 1px solid; } /* 入力中のフィールドの背景色 */ /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */ input[type="text"]:focus { background-color:#ffffcc; border:2px solid #333;border-radius:5px;} /* テキストボックス */ select:focus {background-color:#ffffcc; border:2px solid #333;border-radius:5px; } /* プルダウン */ textarea:focus {background-color:#ffffcc; border:2px solid #333;border-radius:5px;} /* テキストエリア */ /* 「エリア」プルダウンのデザイン */ select { border:#d5d5d5 1px solid; padding:5px 10px; font-size:100%; } input[type=radio]{ position: relative; height:20px; width:20px; vertical-align:middle; margin-right:5px; background-color: #fff; border: 1px solid #d5d5d5; border-radius: 50%; } input[type=radio]:checked{ background-color: #000; } input[type=checkbox]{ position: relative; height:18px; width:18px; vertical-align:middle; margin-right:5px; background-color: #fff; border: 1px solid #d5d5d5; } input[type=checkbox]:checked{ background-color:#000; } /* GC, FF, Edgeでチェックマークが表示できなかったら背景を黒にしよう*/ /* 入力セルの「氏」「名」の文字のデザイン */ span.label_name { margin-right:5px; font-size:; font-weight:bold; color:#333; } /* =================================== メッセージのデザイン =================================== */ /* プライバシーポリシーのリンク*/ .privacy_policy a { position: relative; text-decoration:underline; font-weight:700; display: inline-block; padding-left:20px; } .privacy_policy a::before { position: absolute; top: 10px; /* スマホだと位置がズレるので別に書いている*/ left: 0; width: 12px; height: 12px; background: url(https://hp-sby.jqa.jp/common/img/ico_arrow_right_02.svg) no-repeat; background-size: 12px; content: ""; } .privacy_policy a:hover { cursor: pointer; text-decoration:none; } /* 入力確認画面、完了画面の入力された文字のデザイン */ p.value { font-size:110%; margin:0; vertical-align:middle; } /* ボタンの表示エリアの設定 */ div.button_area { width:; margin:10px auto 10px auto; /* 中央に表示、上下に10pxの余白 */ background:none; padding:10px 0; /* ボタンとの上下の隙間のサイズ */ text-align:center; /* 中央にボタンを表示 */ } /* 入力エラーメッセージのデザイン */ div.message { width:100%; padding:10px 15px; /* メッセージテキストと背景色の隙間のサイズ */ margin:10px 0px; /* 上 右 下 左 の隙間のサイズ */ font-size:; font-weight:bold; color:#c0392b; background: #efefef; } /* 公開終了メッセージのデザイン */ div.finished-message { padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size:129%; font-weight:bold; color:#c0392b; background:#cdd4d9; border: dotted 1px #9c9c9c; } /* =================================== 入力コントロールのデザイン =================================== */ /* 確認／送信／戻る／登録ボタン 　※設問エリアのinputと連動するので注意　*/ input[type=button]{ font-size:129%; width:280px; padding:20px; /* ボタンの文字の 上 右 下 左 の隙間のサイズ　※設問エリアのinputと連動するので注意 */ margin:0px 10px; /* 確認画面に表示される2つのボタンの左右の余白サイズ */ color:#fff; /* 文字の色 */ font-weight:bold; line-height:1.0; white-space:nowrap; display:inline; position:relative; margin:0 5px auto; border:none; background: #005ead url(https://hp-sby.jqa.jp/common/img/ico_arrow_right_01.svg) no-repeat right 15px center / 17px 17px; cursor: pointer; } input[type=button]:hover { cursor: pointer; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)" } /* =================================== 必須項目のマークおよびメッセージなど =================================== */ /* 必須項目のマーク */ span.required { float:right; margin-right:10px; font-size:; font-weight:bold; color:#c0392b; } span.required:after { /* ここを編集することで表示されるマークを変更できます */ content:"※必須"; } /* 必須項目についての説明文 */ p.required_msg { text-align:left; margin-right:; font-size:; font-weight:normal; color:##333; } p.required_msg:after { /* ここを編集することで表示されるマークを変更できます ★「全て」を削除★ */ content:"以下の項目を入力してください。"; } /* メールアドレスの再入力メッセージ */ p.label_mail { margin:5px 0 1px 0; font-size:86%; font-weight:bold; color:#333; } p.label_mail:after { /* ここを編集することで表示されるメッセージを変更できます */ content:"確認のため、もう一度メールアドレスを入力してください。"; } p.label_tel:after { /* ここを編集することで表示されるメッセージを変更できます */ content:""; } /* =================================== スマートフォン表示用のレイアウト =================================== */ /* スマートフォンとして認識する画面の横幅のサイズ */ @media screen and ( max-width:812px ) { /* フォームエリア全体の設定 */ div.container { width: 100%; } /* 設問エリア全体の設定 */ div.wrapper { width: 100%; } /* 設問の表 */ table.items { width:100% ; border-top:#d5d5d5 1px solid; border-bottom:#d5d5d5 1px solid; } /*設問名のセルのデザイン */ td.label { float: left; width:100%; height: ; padding-top:10px; border-top:none; border-right:#d5d5d5 1px solid; } /* 必須項目のマーク */ span.required { float:initial; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { float: left; width: 100%; /* 入力コントロールの幅に合わせて調整してください */ padding-bottom: 0px; border-top:none; border-right:#d5d5d5 1px solid; border-bottom:none; border-left:none; } /* 設問の入力例/説明セルのデザイン */ td.comment { float: left; width: 100%; padding: 0 10px 10px 10px; border-bottom:#d5d5d5 1px solid; border-right:#d5d5d5 1px solid; } /* 設問の入力例/テキストボックス */ input[type="text"]{ font-size: 120%; width: 100% !important; } /* 設問の入力例/テキストエリア */ textarea { width: 100%; height: 100px; } /* ボタンの表示エリアの設定 */ div.button_area { width: 100%; } /* 必須項目のマーク */ span.required { float:right; } .privacy_policy a::before { top: 8px; } input[type=button]{ margin-top:10px; } } /* 横長画面で表の外側に余白を追加 */ div.wrapper { padding-left: 5%; padding-right: 5%; box-sizing: border-box; } /* --- Card layout override --- */ table.items { width: 50%; margin: 0 auto; border-collapse: collapse; } table.items thead { display: none; } table.items, table.items tbody, table.items tr, table.items td { display: block; width: 100%; box-sizing: border-box; } table.items tr { border: 1px solid #d5d5d5; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } table.items td { text-align: left; position: relative; padding: 10px; border: none; word-wrap: break-word; } table.items td::before { content: attr(data-label); display: block; font-weight: bold; margin-bottom: 5px; color: #333; } div.wrapper { padding-left: 5%; padding-right: 5%; box-sizing: border-box; }