@charset "UTF-8"; /* _base */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } ruby { ruby-align: distribute-space; ruby-overhang: auto; ruby-position: above; } html { color: #424242; font-size: 62.5%; } html, body { position: relative; height: 100%; } body { font-family: "Lato", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; font-feature-settings: "palt"; -webkit-font-feature-settings: "pkna"; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(212, 171, 55, 0.9); -webkit-touch-callout: none; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: 0.1rem; } body > div { border-top: 20px solid #00a0e9; } html .fixed, body .fixed { height: 100%; overflow: hidden; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } a { color: #0063b4; font-weight: 700; text-decoration: underline; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } a img, a:visited img { backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-text-decoration-skip: none; } a:hover, a:visited:hover { opacity: 0.4; text-decoration: none; } img { width: 100%; max-width: 100%; height: auto; display: block; } p { font-size: 1.4rem; text-align: justify; line-height: 1.8; word-break: break-all; text-justify: inter-ideograph; text-justify: inter-character; word-wrap: break-word; overflow-wrap: break-word; } p.label_mail:after { /* ここを編集することで表示されるメッセージを変更できます */ content:"確認のため、もう一度メールアドレスを入力してください"; } form { font-size: 1.4rem; width: 88%; margin: 0 auto; max-width: 980px; } form input, form textarea { background-color: #f6f6f6; padding: 10px; border: none; box-shadow: none !important; font-size: 1.4rem; line-height: 1.8; box-sizing: border-box; width: 100%; margin: 5px 0; } td { display: block; line-height: 1.8; } td.label { font-weight: 700; padding-bottom: 10px; } td.comment { padding-top: 10px; } tr { padding: 20px 0; border-bottom: 1px solid #999; display: block; } form h2 { font-size:1.8rem; text-align: center; padding: 60px 0; background: none !important; font-weight: 700; } div#privacy_policy { margin: 20px 0; line-height: 1.8; } form select { background-image: linear-gradient(45deg, transparent 50%, #333 50%),linear-gradient(135deg, #333 50%, transparent 50%),linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px),calc(100% - 2.5em) .5em; background-size: 5px 5px,5px 5px,1px 1.5em; background-repeat: no-repeat; width: auto; } form select { background-color: #fff; border: thin solid #999; border-radius: 4px; display: inline-block; font: inherit; line-height: inherit; line-height: 1.5em; padding: .5em 3.5em .5em 1em; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; } /* =================================== 入力コントロールのデザイン =================================== */ /* 確認／送信／戻る／登録ボタン */ .button_area { text-align: center; } input[type=button] { background-color: #00a0e9; padding: 20px 0; color: #fff; border:none; /* ボタンに枠線をつけたい場合は、ここを設定してください */ } input[type=button]:hover { cursor: pointer; } @media print, screen and (min-width: 768px) { form h2 { font-size: 2.3rem; } tr { display: table-row; } td { display: table-cell; padding:15px; } form input, form textarea { width: auto; } input[type=button] { margin-top: 30px; width: 30%; } td.label { border-bottom: 2px solid #666; width: 30%; } } /* 入力エラーメッセージのデザイン */ div.message { font-size:14px; color:OrangeRed; line-height: 1.8; } /* =================================== 必須項目のマークおよびメッセージなど =================================== */ /* 必須項目のマーク */ span.required { color: OrangeRed; padding-left: 10px; font-weight: 400; } span.required:after { /* ここを編集することで表示されるマークを変更できます */ content:"※必須"; } /* 必須項目についての説明文 */ p.required_msg { color:OrangeRed; } p.required_msg:after { /* ここを編集することで表示されるマークを変更できます */ content:"「※必須」となっている項目は必ず入力してください。"; } /* メールアドレスの再入力メッセージ */ p.label_mail { margin:5px 0 1px 0; color:DarkSlateGray; } p.label_mail:after { /* ここを編集することで表示されるメッセージを変更できます */ content:"確認のため、もう一度メールアドレスを入力してください"; }