/* ===================================
基本設定
=================================== */
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: #f9f9f9 !important;
text-align:center; /* フォームエリアを中央に表示 */
}
/* フォームエリア全体の設定 */
div.container {
width: auto !important;
background:#f9f9f9; /* 背景色 */
border:none !important;
font-size:14px; /* フォントの初期サイズ */
color:#cacaca;
margin:0 auto; /* 画面の中央に表示 */
text-align:left; /* 左寄せ */
}
/* ===================================
設問エリアのレイアウト
=================================== */
/* 設問エリア全体の設定 */
div.wrapper {
width:auto; /* 画面の横幅 */
margin:0 auto; /* 中央に表示 */
padding : 0 15px;
}
/* 設問の表 */
table.items {
border:none;
margin: 30px auto 0!important;
}
.required_msg + .table.item{
margin: 0 auto !important;
}
/* 設問の行 */
tr.item { } /* 必要であれば行のデザインを設定することができます */
/*設問名のセルのデザイン */
td.label {
display: block !important;
width: auto !important;
padding: 0 0 5px !important;
background-color: transparent !important;
color:#977b67;
font-size: 20px;
font-weight: 400;
}
/* 設問の入力セルおよび表示セルのデザイン */
td.value {
display: block !important;
float: none !important;
width: auto !important;
padding: 0 0 15px !important;
color:#977b67;
font-size: 20px !important;
font-weight: 400 !important;
padding:0px;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
display: block !important;
padding: 0 0 30px!important;
border: none !important;
color:#cacaca!important;
font-size: 15px !important;
}
/* 入力セルの「氏」「名」の文字のデザイン */
span.label_name,
table.item td.value .label_name{
padding-right: 15px;
color:#977b67;
font-size: 20px !important;
font-weight: 400 !important;
}
/* 入力確認画面、完了画面の入力された文字のデザイン */
p.value {
font-size:110%;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width:auto;
margin:10px auto 10px auto; /* 中央に表示、上下に10pxの余白 */
padding:10px 0 10px 0; /* ボタンとの上下の隙間のサイズ */
text-align:center; /* 中央にボタンを表示 */
}
/* 入力エラーメッセージのデザイン */
div.message {
padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */
margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
font-size: 15px !important;
font-weight:bold;
color:OrangeRed;
background:LightYellow;
}
.container .message{
max-width: 478px;
margin: 0 auto 20px;
text:center;
font-size: 15px !important;
}
/* 公開終了メッセージのデザイン */
div.finished-message {
padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */
margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
font-size:14px;
font-weight:bold;
color:Crimson;
background:MistyRose;
}
* {
-webkit-appearance: none;
}
/* ===================================
入力コントロールのデザイン
=================================== */
/* 確認／送信／戻る／登録ボタン */
#GotoTopBtn,
input[type=button] {
font-size:18px;
max-width:470px;
padding:5px 10px 2px 10px; /* ボタンの文字の 上 右 下 左 の隙間のサイズ */
margin:0px 10px 0px 10px; /* 確認画面に表示される2つのボタンの左右の余白サイズ */
border: solid 1px #977b67 !important;
color:white; /* 文字の色 */
font-weight:bold;
}
input[type=button]:hover { cursor: pointer; }
/* ===================================
必須項目のマークおよびメッセージなど
=================================== */
/* 必須項目のマーク */
span.required {
display: inline-block;
overflow: hidden;
float: none !important;
width: 16px;
height: 16px;
margin: 0 0 0 10px !important;
color:#977b67 !important;
font-size: 15px;
font-weight: 400 !important;
}
span.required:after {
content:"※";
}
p.required_msg {
margin: 0 0 20px!important;
text-align: center !important;
color:#cacaca!important;
font-size: 15px !important;
font-weight: 400 !important;
}
input[type="text"]{
min-width: 200px;
height: 57px;
border-radius: 3px;
line-height: 57px;
padding: 0 10px;
box-sizing: border-box;
border: solid 1px #cacaca!important;
}
input[name="email_confirm"],
input[name="email"]{
width: 100%;
}
p.required_msg:after {
content:"「※」となっている項目は必ず入力してください。";
}
p.label_mail,
table.item td.value .label_mail{
margin: 10px 0 3px;
color:#cacaca!important;
font-size: 15px !important;
}
p.label_mail:after {
content:"確認のため、もう一度メールアドレスを入力してください";
}
.container a{
color:#cacaca;
}
.button_area.footer-btn{
margin-top: 80px;
}
#GotoTopBtn,
.button_area input[type="button"]{
width: 100%;
height: 50px;
padding: 0 !important;
background-color:#977b67 !important;
border-radius: 3px !important;
color:#fff;
font-size: 20px !important;
font-weight: 400 !important;
}
#button_confirm_submit{
width: 35%;
margin-left: 20px !important;
}
#button_confirm_back{
margin-top: 50px !important;
width: 35%;
background:transparent !important;
border: solid 1px #977b67 !important;
color:#977b67 !important;
}
.header-message{
max-width:980px;
margin: 40px auto 60px;
text-align:center;
color:#977b67!important;
font-size: 30px;
}
.privacy_policy .privacy-text-master {
max-width: 470px;
margin: 0 auto;
}
.header-container{
position:relative;
max-width:980px;
margin: 0 auto 20px;
padding-top: 60px;
text-align:center;
}
.header-container p.txt-add-header-message{
margin: 20px auto 0;
color: #987b67!important;
font-size: 14px;
}
.header-container img{
width: 55%;
max-width: 340px;
}
.header-container #Btn-Close{
position:absolute;
display: inline-block !important;
top:25px;
left: 15px;
width: 30px;
height: 30px;
border: none !important;
background:transparent url(https://weeeat.tokyogas-com.co.jp/img/icon_close.svg) no-repeat 0 0 scroll !important;
background-size: auto!important;
}
.header-container #Btn-Close:hover{
cursor:pointer;
opacity: 0.7;
}
div.button_area,
.button_area{
padding: 50px 15px;
max-width: 700px;
margin-left:auto;
margin-right:auto;
}
@media screen and ( max-width:768px ) {
p.required_msg {
font-size:11px !important;
}
.container .message {
font-size: 11px !important;
}
span.label_name,
table.item td.value .label_name{
display: inline-block;
width: 20px;
font-size: 15px !important;
}
td.label {
padding: 0 0 5px!important;
font-size: 16px;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
padding: 0 0 10px!important;
font-size: 12px !important;
}
td.value {
font-size: 18px !important;
}
.header-message{
margin: 40px 0 40px;
font-size: 20px;
}
.privacy_policy .privacy-text-master {
width: 92%;
}
input[type="text"]{
margin-bottom:10px;
height: 30px;
line-height: 30px;
width:calc(100% - 36px);
}
input[name="email_confirm"],
input[name="email"]{
width: 100% !important;
}
p.label_mail,
table.item td.value .label_mail{
margin: 0 0 3px;
font-size: 12px !important;
}
.privacy_policy{
margin: 10px 0;
font-size: 11px;
}
.button_area input[type="button"]{
max-width: 250px;
height: 40px;
font-size: 18px !important;
margin: 0 !important;
}
.button_area.footer-btn{
margin-top: 40px;
}
.button_area #lf_form_submit_button{
width: 250px;
}
#button_confirm_back,
#button_confirm_submit{
width: 43% !important;
}
}
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。