@charset "UTF-8";
/* PARDOT FORM */
/* web fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');



body { margin: 0; padding: 0; font: 16px/1.6 'Open Sans', 'Noto Sans JP', sans-serif; height: 100%; background-color: #fff; color: #000; font-weight: 400;}
main { margin: 0 auto; padding: 40px 0 0; }
section { margin: 0 auto; padding: 0; }
p { font-size: 14px; color: #000; }
a { color: #369; text-decoration: underline; }

form { margin: 20px auto; padding: 0px; border: 0; background-color: #fff; width: 90%; }
@media(max-width:768px) {
form { margin: 20px auto; padding: 0px; border: 0; background-color: #fff; width: 90%; }
}

/* --------------------------------------------
 formテキストなどPardot用にスタイル指定
----------------------------------------------*/
/* テキスト */
form hr { border-color: #ccc; }
form p { margin: 0 0 5px; font-size: 14px; line-height: 1.5; color: #333; text-align: left; box-sizing: border-box; font-family: 'Open Sans', 'Noto Sans JP', sans-serif!important; }
form p label { margin-top: 2px; font-size: 14px; font-weight: 500; line-height:1.5; color: #333; text-decoration: none; }
form p label.inline { display: inline; font-size: 14px; font-weight: 500!important; line-height:1.5; color: #666!important; font-family: 'Open Sans', 'Noto Sans JP', sans-serif!important; }

p span.description { display: block; margin: 5px 0; color: #369; font-size: 12px; line-height: 1.5; }


/* レイアウト */
form p { margin: 0 auto 35px; width: 100%; box-sizing: border-box; }
form p label.field-label { display: block; width: 100%; margin-bottom: 5px; font-size: 16px; }
form p select { width: 100%; padding: 5px; border: 1px solid #ccc; font-size: 14px; box-sizing: border-box; }
form p input { width: 100%; padding: 5px; border: 1px solid #ccc; font-size: 14px; box-sizing: border-box; }
form p.pd-checkbox input[type="checkbox"] { width: auto; margin-right: 5px; box-sizing: border-box; }
form p.pd-checkbox label.inline { width: auto; margin-right: 20px; font-size: 14px; color: #333; }
form p.pd-radio input[type="radio"] { width: auto; margin-right: 5px; box-sizing: border-box; }
form p.pd-radio label.inline { width: auto; margin-right: 20px; font-size: 14px; color: #333; }
form p.pd-textarea textarea { display: block; width: 100%; margin-bottom: 5px; padding: 5px; border: 1px solid #ccc; font-size: 16px; box-sizing: border-box; }
form p.pd-textarea span { font-size: 14px; color: #003e70; }
/* reCAPTCHAレイアウト */
form p.pd-captcha { margin: 0 auto 35px; text-align: center; }
form div.g-recaptcha, form div.g-recaptcha div { margin: 0 auto; text-align: center; }
@media(max-width:768px) {
}


/* 送信ボタン */
input[type="submit"] { display: block; margin: 40px auto; padding: 8px 0; border: 0; width: 500px; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 500; color: #fff; background-color: #369; }
input[type="submit"]:hover { color: #ff0;  background: #08c; }
@media(max-width:768px) {
input[type="submit"] { margin: 30px auto; width: 80%; }
}



/* 必須項目マーク追加 */
p.required label::before { content: "*"; color: #f00; margin-left: 2px; }
p.required span span label::before { display: none; margin-left: 0; }
@media(max-width:768px) {
form p { display: block; width: 100%; margin-bottom: 25px; }
form p label { margin-right: 20px; white-space: normal; }
}



/* Pardotシステムcss 上書き */
form.form p.required label, 
form.form span.required label { font-size: 14px; padding-left: 0px!important; }





/* --------------------------------------------
 確認ページ
----------------------------------------------*/
/* 必須項目が未入力時（Please correct the errors below:） */
p.errors { margin: 0 auto 40px!important; padding: 20px 20px!important; border: 0; border-radius: 10px; background-color: #ED1E79!important; font-weight: 600; font-size: 14px; line-height: 1.0; text-align: left; }
/* 必須項目エラーテキスト（This field is required.） */
p.error label { color: #000!important;  }
p.no-label { margin-top: -25px; margin-bottom: 50px; color: #ED1E79!important; font-size: 12px; font-weight: 600; }
form.form p.error { color: #666; }







/* --------------------------------------------
サンクスページ
----------------------------------------------*/
/* Thanks Page */
body.ThanksPage { width: 100%; height: 100vh; }
div.thanks-page-top { position: relative; margin: 0; padding: 1em 0; background: url("../../../assets/images/top/uscw-light-bnr.jpg") 0 0 no-repeat; background-size: 100%; font-size: 24px; width: 100%; }
div.thanks-page-bottom { position: absolute; left: 0; bottom: 0; margin: 0; padding: 1em 0; background: url("../../../assets/images/top/uscw-light-bnr.jpg") 0 0 no-repeat; background-size: 100%; font-size: 24px; width: 100%; }
div.thanks-container { margin: 0 auto; width: 50%; display: grid; place-items: center; height: 70%; }
div.thanks-container .pad { margin: 0; padding: 0; }
div.thanks-container h1 { margin: 0; width: 30%; font-size: 24px; color: #000; text-align: left; }
div.thanks-container h1 img { margin: 0; width: 100%; }
div.thanks-container h2 { margin: 0 0 1em; font-size: 24px; color: #f39c12; text-align: left!important; }
div.thanks-container p { margin: 0; font-size: 16px; line-height: 1.5; color: #000; text-align: left; }
div.thanks-container p.copy { font-size: 12px; color: #fff; }
@media(max-width:998px) {
div.thanks-container.pad { padding: 60px 0 40px; }
}
@media(max-width:768px) {
div.thanks-container { width: 90%; }
div.thanks-container.pad { padding: 40px 0 40px; }
div.thanks-container h1 { width: 50%; }
}




/* --------------------------------------------
フォーム単独ページ
----------------------------------------------*/
/* div */
section#form-page { margin: 0 auto 80px; width: 60%; }
@media(max-width:768px) {
section#form-page { width: 94%; }
}
/* header */
header#form { margin: 0; padding: 30px 0; border: 0; background: url("../images/top/nf-space23-hero.jpg") 50% 50% no-repeat; background-size: cover; width: 100%; }
header#form h1 { margin: 0 auto; width: 600px; }
header#form h1 img { margin: 0; width: 100%; }
header#form h2 { margin: 10px auto 0; width: 300px; }
header#form h2 img { margin: 0; width: 100%; }
@media(max-width:768px) {
header#form h1 { width: 98%; }
header#form h2 { width: 45%; }
}