/* ===================================
基本設定
=================================== */
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 {
width:960px; /* 画面の横幅 */
background:white; /* 背景色 */
border:Gainsboro 2px solid; border-top:none; /* 外枠のラインの色と太さ */
font-size:14px; /* フォントの初期サイズ */
color:#333; /* フォントの初期カラー */
margin:0 auto; /* 画面の中央に表示 */
text-align:left; /* 左寄せ */
}
/* ===================================
設問エリアのレイアウト
=================================== */
/* 設問エリア全体の設定 */
div.wrapper {
width:940px; /* 画面の横幅 */
margin:0 auto; /* 中央に表示 */
background:white;
}
/* 設問の表 */
table.items {
border:none;
}
/* 設問の行 */
tr.item { } /* 必要であれば行のデザインを設定することができます */
/*設問名のセルのデザイン */
td.label {
float:left;
width:920px; /* 実際の設問名の文字の長さに合わせて調整してください */
padding:0px 0px 0px 8px;
color:Green;
font-size:15px;
border-left:Green 4px solid;
background:none;
}
/* 設問の入力セルおよび表示セルのデザイン */
td.value {
float:left;
width:400px; /* 入力コントロールの幅に合わせて調整してください */
padding:4px 3px 18px 12px;
border-bottom:none; /* 設問と設問の間の下線 */
background:White;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
float:right;
width:500px;
font-size:11px;
padding:10px 2px 2px 2px;
color:Green;
border-bottom:none;
background:White;
}
/* 入力セルの「氏」「名」の文字のデザイン */
span.label_name {
padding-right:5px;
font-size:85%;
font-weight:bold;
color:DarkSlateGray;
}
/* 入力確認画面、完了画面の入力された文字のデザイン */
p.value {
font-size:110%;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width:940px;
margin:10px auto 10px auto; /* 中央に表示、上下に10pxの余白 */
background:MintCream;
padding:10px 0 10px 0; /* ボタンとの上下の隙間のサイズ */
text-align:center; /* 中央にボタンを表示 */
}
/* 入力エラーメッセージのデザイン */
div.message {
padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */
margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
font-size:14px;
font-weight:bold;
color:Green;
background:MintCream;
}
/* 公開終了メッセージのデザイン */
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=button] {
font-size:18px;
background:Green; /* ボタンの色 */
padding:5px 10px 2px 10px; /* ボタンの文字の 上 右 下 左 の隙間のサイズ */
margin:0px 10px 0px 10px; /* 確認画面に表示される2つのボタンの左右の余白サイズ */
color:white; /* 文字の色 */
font-weight:bold;
/* ボタンに枠線をつけたい場合は、ここを設定してください */
border-top:#e5ffe5 2px solid;
border-left:#eeffee 2px solid;
border-right:#bbddbb 2px solid;
border-bottom:#b0ddb0 2px solid;
}
input[type=button]:hover { cursor: pointer; }
/* 入力中のフィールドの背景色 */
/* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */
input[type="text"]:focus { background-color:MintCream; } /* テキストボックス */
select:focus { background-color:MintCream; } /* プルダウン */
textarea:focus { background-color:MintCream; } /* テキストエリア */
/* ===================================
必須項目のマークおよびメッセージなど
=================================== */
/* 必須項目のマーク */
span.required {
margin-left:20px;
font-size:80%;
font-weight:bold;
color:OrangeRed;
}
span.required:after {
/* ここを編集することで表示されるマークを変更できます */
content:"*Required";
}
/* 必須項目についての説明文 */
p.required_msg {
text-align:right;
margin-right:4px;
font-size:80%;
font-weight:bold;
color:OrangeRed;
}
p.required_msg:after {
/* ここを編集することで表示されるマークを変更できます */
content:"Fields marked "*Required" must be filled in.";
}
/* メールアドレスの再入力メッセージ */
p.label_mail {
margin:5px 0 3px 0;
font-size:10px;
color:Green;
}
p.label_mail:after {
/* ここを編集することで表示されるメッセージを変更できます */
content:"確認のため、もう一度メールアドレスを入力してください";
}
/* ===================================
スマートフォン表示用のレイアウト
=================================== */
/* スマートフォンとして認識する画面の横幅のサイズ */
@media screen and ( max-width:479px ) {
/* フォームエリア全体の設定 */
div.container {
width: 100%;
}
/* 設問エリア全体の設定 */
div.wrapper {
width: 100%;
}
/*設問名のセルのデザイン */
td.label {
width: 95%;
}
/* 設問の入力セルおよび表示セルのデザイン */
td.value {
width: 95%; /* 入力コントロールの幅に合わせて調整してください */
padding-bottom:0px;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
width: 95%;
padding: 0px 2px 10px 2px;
}
/* 設問の入力例/テキストボックス */
input[type="text"]{
font-size: 120%;
width: 95% !important;
}
/* 設問の入力例/テキストエリア */
textarea {
width: 95%;
height: 100px;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width: 95%;
}
}
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。
a_tag.html
Please agree to our Privacy Policy before submitting your information.
If you agree and submit your personal information,
we may use cookies to link your browsing history on our website with your personal information to understand and analyze it.