@charset "UTF-8";

* {margin:0 0; padding:0 0; letter-spacing:0.5px; box-sizing:border-box;}
html, body {max-width:3840px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

ul,ol {list-style:none;}
a {display:inline-block; transition:background, 0.2s;}
a:hover {}
span {display:inline-block;}
strong {display:inline-block;}
img {width:auto; height:auto; max-width:100%; max-height:100%;}

body ::-webkit-input-placeholder {color:#999; font-weight:200;}
body ::-moz-placeholder {color:#999; font-weight:200;}
body :-moz-placeholder {color:#999; font-weight:200;}
body :-ms-input-placeholder {color:#999; font-weight:200;}

body :focus::-webkit-input-placeholder {color:#0077c3; font-weight:600;}
body :focus::-moz-placeholder {color:#0077c3; font-weight:600;}
body :focus::-ms-input-placeholder {color:#0077c3; font-weight:600;}
body :focus::placeholder {color:#0077c3; font-weight:600;}




header div#logo {position:relative; width:100%; max-width:980px; margin:0 auto; padding:0 0; text-align:left; line-height:0.5;}
header div#logo a {position:absolute; top:15px; left:0; display:inline-block; line-height:0.5;}
header div#logo img {width:auto; height:auto; max-width:240px; max-height:40px;}
header div#logo > img {position:absolute; top:15px; left:0; line-height:1;}

#wrap {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:0 20px; width:100%; max-width:980px; margin:0 auto;}

#main {width:100%; max-width:590px;}
#main > p {margin:15px auto; font-size:14px; text-align:center;}

#notice {margin:20px auto 0 auto;}
#notice p {margin:0 auto; font-size:14px;}
#notice p span {display:inline-block;}
#notice p strong {display:inline-block; margin-top:10px;}
#notice p a {color:#0077c3;}
#notice p a:hover {color:#0077c3; opacity:0.7;}

#sub {width:100%; max-width:370px; min-height:120px; margin-top:60px;}
#sub h1 {margin:0 0; padding:0 0; font-size:16px;}
#sub h1 span {font-size:125%;}
#sub h2 {display:inline-block; margin:15px 0 0 0; padding:5px 5px; font-size:14px; font-weight:400; color:#fff; background:#333;}
#sub p {margin:0 0; padding:10px 0; font-size:14px;}
#sub p span {font-size:12px;}
#sub > div {padding:10px 0 0 0; line-height:0.5;}
#sub > div img {width:auto; height:auto; max-width:100%;}

#special_notice_msg {flex-basis:100%; width:100%; margin:0 auto; padding:0 0; font-size:11px !important; color:#e51b00; text-align:left;}
div.satori__custom_form > div.satori__input_group:not(:has(textarea)) #special_notice_msg {display:none; opacity:0;}

footer {width:100%; margin:40px auto 0 auto; padding:15px 0; font-size:11px; text-align:center; border-top:1px solid #ccc;}


@media only screen and (max-width: 768px) {
header div#logo {padding:0 4%;}
header div#logo a,
header div#logo > img {left:4%;}
#wrap {padding:0 4%;}
#main {max-width:100%;}
#sub {position:relative; max-width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0 20px; margin-bottom:5px; padding:0 0 20px 0; border-bottom:1px solid #ccc;}
#sub h1 {margin:0 0 10px 300px;}
#sub h2 {margin:0 0 0 300px;}
#sub p {margin:0 0 0 300px; padding:10px 0 0 0;}
#sub > div {position:absolute; left:0; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); margin:0 0; padding:0 0; width:280px;}
}


@media only screen and (max-width: 430px) {
#notice p span {display:inline;}
#sub {display:block;}
#sub h1 {margin:0 0 10px 0;}
#sub h2 {margin:10px 0 0 0;}
#sub p {margin:0 0;}
#sub > div {position:static; transform:translate(0, 0); -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); width:100%;}
#special_notice_msg {text-align:left;}
}


@media only screen and (max-width: 330px) {
}

/* #subの説明を改善 ここから */
#sub > h2 {width:100%; padding:10px 10px 10px 40px; border-radius:4px 4px 0 0; color:#000; font-weight:600; background:#F6F6F6 url(/form/img/logo_mark_esm.png) no-repeat left 10px top 50% / auto 20px; border-bottom:1px dotted #ccc;}
#sub > p {width:100%; padding:10px 10px; background:#F6F6F6;}
#sub > p:nth-last-of-type(1) {border-radius:0 0 4px 4px;}
#sub > p:has(+ h2) {border-radius:0 0 4px 4px;}
#sub > p + h2 {margin-top:10px;}
/* #subの説明を改善 ここまで */





div.satori__custom_form {font-size:14px; line-height:1.4;}
div.satori__custom_form span.satori__require {display:none;}
div.satori__custom_form span.satori__not_require {transform:translate(0, -1px); margin:0 0 0 1px; padding:3px 4px 1px 4px; font-size:10px; line-height:12px;}
div.satori__custom_form div.satori__input_group div.satori__error_messages {flex-basis:100%; font-size:11px; line-height:15px; text-align:center; color:#e51b00;}
div.satori__custom_formzzz div.satori__input_group:not(.not_filled) div.satori__error_messages {display:none !important;}
div.satori__custom_form div.satori__input_group.not_filled div.satori__error_messages {display:block !important;}
div.satori__custom_form > div.satori__input_group.error:has(input[type=email]) div.satori__error_messages,
div.satori__custom_form > div.satori__input_group.error:has(textarea) div.satori__error_messages {display:block !important;}

div.satori__custom_form div.satori__horiz_group:has(.not_filled) > div:not(.not_filled)::after {content:""; display:inline-block; width:100%; height:15px;}

div.satori__custom_form > div {border-left:1px solid #ccc; border-right:1px solid #ccc;}
div.satori__custom_form > div:nth-of-type(1) {border-top:1px solid #ccc; border-radius:4px 4px 0 0;}
div.satori__custom_form > div:nth-of-type(2n+1) {background:#f6f6f6;}
div.satori__custom_form > div:has(+ div + #satori__privacy_policy_agreement_wrapper) {border-bottom:1px solid #ccc; border-radius:0 0 4px 4px;}
div.satori__custom_form > div#satori__privacy_policy_agreement_wrapper {background:transparent; border:none;}
div.satori__custom_form > div#satori__privacy_policy_agreement_wrapper > div.satori__privacy_policy_message_wrapper > p,
div.satori__custom_form > div#satori__privacy_policy_agreement_wrapper > p {margin:15px auto; font-size:12px; text-align:center;}

div.satori__custom_form > div#satori__recaptcha_wrapper {background:transparent; border:none;}

div.satori__custom_form > div.satori__input_group {position:relative; display:flex; flex-wrap:wrap; justify-content:start; align-items:center; gap:10px 10px; padding:10px 10px 10px 140px;}
div.satori__custom_formzzz > div.satori__input_group:has(textarea) {padding:10px 10px;}
div.satori__custom_form > div.satori__input_group > label:nth-of-type(1) {position:absolute; left:10px; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); padding:0 0; width:125px; color:#333;}
div.satori__custom_form > div.satori__input_group > label:has(.satori__require) {font-weight:600;}

div.satori__custom_formzzz > div.satori__input_group > label:has(+ textarea) {display:none;}

div.satori__custom_form a {color:#0077c3; text-decoration:underline;}
div.satori__custom_form a:hover {color:#0077c3; opacity:0.7;}

div.satori__custom_form input[type=text],
div.satori__custom_form input[type=tel],
div.satori__custom_form input[type=email],
div.satori__custom_form select,
div.satori__custom_form textarea {background-color:#fff !important; border-color:#e3e3e3 !important; box-shadow:none; border-radius:8px;}
div.satori__custom_form textarea {min-height:100px;}

div.satori__custom_form select {padding:13px; width:100%; height:auto;}

div.satori__custom_form div input[type=radio] {position:absolute; width:1px; height:1px; z-index:-10; opacity:0;}
div.satori__custom_form div label:nth-of-type(n+2) {display:inline-block; margin:0 0; padding:2px 10px; font-size:14px; line-height:1.5; text-align:left; color:#333; background:#fff; border:1px solid #e3e3e3; border-radius:4px;}
div.satori__custom_form div label:nth-of-type(n+2):hover {border:1px solid #0077c3;}

div.satori__custom_form div input[type=radio]:checked + label {color:#fff; background:#0077c3; border:1px solid #0077c3;}
div.satori__custom_form div input[type=checkbox] + label {font-size:12px; color:#333;}
div.satori__custom_form div input[type=checkbox] + label:hover {color:#0077c3;}
div.satori__custom_form div input[type=checkbox]:checked + label {color:#0077c3;}

div.satori__custom_form p.satori__submit_group {display:flex; flex-wrap:wrap; justify-content:center; gap:10px 10px; margin:10px auto 0 auto; padding:0 10px;}
div.satori__custom_form p.satori__submit_group input.satori__btn {margin:0 0; padding:15px 10px; width:100%; max-width:280px; font-size:20px; line-height:1.5; font-weight:600; color:#fff; border-radius:50px; cursor:pointer; background:#ff9c00; transition:all 0.3s ease-in-out;}
div.satori__custom_form p.satori__submit_group input.satori__btn:hover {opacity:1; filter:brightness(1.2);}
div.satori__custom_form p.satori__submit_group input.satori__btn.cancel {font-weight:400; color:#222; background:#ccc;}

div.satori__custom_form label:has(.satori__require) + input[type=text],
div.satori__custom_form label:has(.satori__require) + input[type=tel],
div.satori__custom_form label:has(.satori__require) + input[type=email],
div.satori__custom_form label:has(.satori__require) + textarea {background-color:#E8F0FE !important}

div.satori__custom_form label:has(.satori__require) + input[type=text]:placeholder-shown,
div.satori__custom_form label:has(.satori__require) + input[type=tel]:placeholder-shown,
div.satori__custom_form label:has(.satori__require) + input[type=email]:placeholder-shown,
div.satori__custom_form label:has(.satori__require) + select,
div.satori__custom_form label:has(.satori__require) + textarea:placeholder-shown {background-color:#fff !important;}

div.zzzsatori__custom_form > div.satori__input_group.radio_checked:has(.satori__require)::before {background-color:#E8F0FE !important;}

div.satori__custom_form .not_filled label:has(.satori__require) + input[type=text],
div.satori__custom_form .not_filled label:has(.satori__require) + input[type=tel],
div.satori__custom_form .not_filled label:has(.satori__require) + input[type=email],
div.satori__custom_form .not_filled label:has(.satori__require) + select,
div.satori__custom_form .not_filled label:has(.satori__require) + textarea {background-color:#fdd !important}

div.zzzsatori__custom_form > div.satori__input_group.not_filled:has(.satori__require)::before {background-color:#fdd !important;}
div.satori__custom_form > div.satori__input_group.not_filled:has(.satori__require) input[type=radio] + label {background-color:#fdd !important;}

div.satori__custom_form .ng_mail label:has(.satori__require) + input[type=email] {background-color:#fdd !important;}
.ng_mail::after {content:""; display:block; width:100%; height:15px; background:url(/form/img/error_msg_ng_mail.png) no-repeat 0 0 / auto 10px;}

div.not_filled:has(#satori__privacy_policy_agreement) {padding:10px 5px; background-color:#fdd !important; border-radius:8px;}

p#special_notice_msg a {color:#0077c3 !important;}
p.satori__message a {color:#0077c3 !important;}

.satori__system_notes {display:none;}

@media only screen and (max-width: 430px) {
div.satori__custom_form > div.satori__input_group {padding:10px 10px;}
div.satori__custom_form > div.satori__input_group > label:nth-of-type(1) {position:static; transform:translate(0, 0); -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); width:100%;}
}


@media only screen and (max-width: 330px) {
div.satori__custom_form > div#satori__privacy_policy_agreement_wrapper > div.satori__privacy_policy_message_wrapper > p,
div.satori__custom_form > div#satori__privacy_policy_agreement_wrapper > p {text-align:left;}
}


/* 氏名を綺麗に配置 ここから */
div.satori__custom_form > div.satori__horiz_group {gap:10px 10px; position:relative; padding:10px 10px 10px 140px;}
div.satori__custom_form > div.satori__horiz_group:has(div.satori__customer_last_name)::before {content:"氏名"; display:block; position:absolute; left:10px; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); font-weight:600;}
div.satori__custom_form > div.satori__horiz_group > div {padding:0 0;}
div.satori__custom_form > div.satori__horiz_group > div label {display:none;}
div.satori__custom_form > div.satori__horiz_group > div input + .satori__error_messages {margin-top:10px;}

@media only screen and (max-width: 430px) {
div.satori__custom_form > div.satori__horiz_group {padding:10px 10px;}
div.satori__custom_form > div.satori__horiz_group:has(div.satori__customer_last_name)::before {position:static; width:100%; font-size:14px; text-align:left; transform:translate(0, 0); -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0);}
div.satori__custom_form > div.satori__horiz_group > div {width:calc(50% - 10px); flex-basis:calc(50% - 10px);}
div.satori__custom_form > div.satori__horiz_group > div input {width:100%;}
}
/* 氏名を綺麗に配置 ここまで */


/* フォームの上に訴求メッセージを掲載 ここから */
#main > p#appeal {display:block; margin:15px auto; padding:10px 5px; width:100%; font-size:16px; line-height:1.4; font-weight:600; text-align:center; color:#fff; background:#ff9c00; box-sizing:border-box; border-radius:4px;}
/* フォームの上に訴求メッセージを掲載 ここまで */
