@charset "utf-8";

.text-center {text-align:center;}
.text-end {text-align:end;}
.text-justify {text-align:justify;word-break:break-all;}
.text-small {font-size:.9em;}
.text-large {font-size:1.1em;}

span.no-wrap {display:inline-block;white-space:nowrap;}

input.secure-disc {-webkit-text-security:disc;}
input.secure-disc:focus {-webkit-text-security:none;}
*:where(input[type=checkbox],input[type=radio],button),
label:has(>input[type=radio],input[type=checkbox]) {cursor:pointer;}

a.sign-show {display:inline-flex;min-height:40px;padding:0 1em;align-items:center;justify-content:center;white-space:nowrap;background-color:#e91e63;color:#fff;vertical-align:middle;}
a.sign-show.sign-ok {background-color:#4caf50;}
.form-sign {text-align:center;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;visibility:hidden;}
.form-sign.sign-on {visibility:visible;z-index:1000;}
.form-sign > div {background-color:#fff;font-size:16px;padding:20px;position:relative;}
.form-sign a.sign-hide {position:absolute;right:0;top:-40px;display:flex;width:36px;height:36px;font-size:32px;align-items:center;justify-content:center;color:red;}
.form-sign p {font-size:1em;line-height:1.5;padding:0;}
.form-sign .sign {width:280px;height:140px;margin:10px auto;outline:dashed 1px #88f;border-radius:10px;}
.form-sign button {background-color:#343434;color:#fff;padding:.5ch 2ch;cursor:pointer;line-height:2;border:0;}
.form-sign button.ok {background-color:#4caf50;}

.form-insert {display:flex;gap:var(--gap-width);flex-flow:column;--gap-width:16px;position:relative;--cols-count:3;}
.form-insert li {display:flex;flex-flow:row;align-items:center;border:solid 1px #dfdfdf;padding-left:1ch;position:relative;overflow:hidden;min-height:35px;}
.form-insert li > span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
.form-insert li:has(.ex-form-show:hover),
.form-insert li:has(.ex-form-show:focus) {background-color:#cfd6ff;}
.form-insert li > .ex-form-show {display:flex;align-items:center;background-color:#e91e63;color:#fff;padding:.5ch 1em;outline:solid 1px #e91e63;flex:0 0 auto;width:fit-content;align-self:stretch;}
.form-insert li > .ex-form-show.ok {background-color:#4caf50;outline-color:#4caf50;}
.form-insert li:has(> .ex-form-show.ok) {border-color:#4caf50;}
.form-insert li > input {width:1px;opacity:0;position:absolute;top:0;right:-1px;}

.form-attach {display:flex;gap:var(--gap-width);flex-flow:column;--gap-width:16px;position:relative;--cols-count:2;}
.form-attach li {display:flex;flex-flow:row;align-items:center;border:solid 1px #dfdfdf;padding-left:1ch;position:relative;min-height:35px;}
.form-attach li:focus-within {background:#cfd6ff;}
/* .form-attach li:has(input:invalid) {border-color:red;} */
.form-attach li > em,
.form-attach li > a {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;position:relative;z-index:2;transition:all .2s;}
.form-attach li > a:empty {display:none;}
.form-attach li > em:has(+ a:not(:empty)) {position:absolute;left:1ch;top:-.8em;font-size:.8em;display:block;background:#fff;line-height:1.1;padding:0;color:#888;z-index:1;}
/* .form-attach li:has(button:focus),  */
.form-attach li:has(button:hover) {background-color:#cfd6ff;}
.form-attach li > button {background-color:#e91e63;color:#fff;padding:.5ch 1em;outline:solid 1px #e91e63;flex:0 0 auto;width:fit-content;align-self:stretch;}
.form-attach li > button:has(+ button):not(:has(~ button.ok)) {display:none;}
.form-attach li > button.ok {display:none;}
.form-attach li > button:where(a:not(:empty) ~ *),
.form-attach li > button:has(~ button.ok) {background-color:#4caf50;outline-color:#4caf50;}
.form-attach li:has(> a:not(:empty)),
.form-attach li:has(> button.ok) {border-color:#4caf50;}
.form-attach li > input {width:1px;opacity:0;position:absolute;top:0;right:-1px;}

p.form-help {margin-bottom:.8em;position:relative;padding-left:1.2em;font-size:.9em;}
p.form-help::before {content:'※';position:absolute;left:0;}

@media (min-width:1024px) {
    .form-insert,
    .form-attach {flex-flow:row wrap;--gap-width:16px;}
    .form-insert li,
    .form-attach li {flex:0 auto;width:calc(100% / var(--cols-count) - var(--gap-width) / var(--cols-count) * (var(--cols-count) - 1));}
    .form-attach li > a {font-size:.9em;}
}

.ex-form {display:inline-block;width:1px;height:1px;overflow:hidden;position:fixed;padding:10px 10px 0 10px;}
.ex-form.on {display:block;left:0;top:0;width:100%;height:100%;z-index:65001;overflow:auto;background-color:rgba(0,0,0,.75);}
.ex-form.on > a.close {position:fixed;right:10px;top:10px;display:flex;align-items:center;justify-content:center;color:#f00;z-index:2;font-size:32px;line-height:1;}
.ex-form h4 {font-size:1.3em;font-weight:bold;text-align:center;padding:1ch 0 1em 0;word-break:keep-all;}
.ex-form > div {background:#fff;max-width:1200px;margin:10px auto;padding:10px;border-radius:6px;box-shadow:rgba(0,0,0,.5) 0 0 100px;}
.ex-form > p {position:sticky;max-width:1200px;left:0;bottom:0;width:100%;margin:0 auto;padding:0;display:flex;z-index:2;}
.ex-form > p button {flex:1 1 auto;border:0;padding:1em 0;background:#777;color:#fff;cursor:pointer;}
.ex-form button.ex-ok {background:#e91e63;}

.ex-forms {display:block;border:0;margin-top:2em;}
.ex-forms .nowrap {display:inline-block;word-break:keep-all;}
.ex-forms .heading {font-size:1.1em;font-weight:bold;display:block;color:#485f69;}
.ex-forms .heading + div {border-top:solid 1px #000;}
.ex-forms div:has(> label) {display:flex;gap:var(--gap-width);--gap-width:12px;border-bottom:solid 1px #ddd;padding:10px 0;flex-flow:column;}
.ex-forms div:has(> label):where(:last-child) {border-bottom:0;}
.ex-forms div:has(> label) > label:first-child {font-weight:bold;color:#485f69;}
.ex-forms div:has(> label) > * {flex:0 0 100%;}
.ex-forms ul {list-style:inside;margin-left:1em;}
.ex-forms ul li::marker {content:'￭ ';}
.ex-forms ul ul li::marker {content:'‣ ';}
.ex-forms ol {list-style:inside;}
.ex-forms ol li {list-style:decimal;}
.ex-forms ol li + li {margin-top:1em;}
.ex-forms .form_check_insert {margin-top:1em;word-break:keep-all;}
.ex-forms .form_check_insert ul {list-style:none;margin:2em 0;}
.ex-forms .form_check_insert ul li::marker {content:'';}
.ex-forms p:has(input[type=radio],input[type=checkbox]) {text-align:end;padding-top:1ch;}
.ex-forms label:has(input[type=radio],input[type=checkbox]) {display:inline-flex;gap:4px;align-items:center;cursor:pointer;}
.ex-forms label:has(input) + label:has(input) {margin-left:1em;}
.ex-forms input:where([type=radio],[type=checkbox]) {width:24px;height:24px;cursor:pointer;}
.ex-forms input:where([type=radio],[type=checkbox]):focus {outline:solid 2px black;}

.ex-input {display:flex;align-items:center;gap:var(--gap-width-input);--gap-width-input:var(--gap-width);}
.ex-input input:not([type=radio],[type=checkbox]) {width:100%;min-width:1em;}

@media (min-width:600px) {
    .ex-input input:not([type=radio],[type=checkbox]) {width:auto;min-width:1em;max-width:100%;}
}

@media (min-width:768px) {
    .ex-form {padding:20px 20px 0 20px;}
    .ex-form > div {padding:20px 30px;}
    .ex-forms div:has(> label) {flex-flow:row;align-items:center;font-size:0.9em;--gap-width:8px;}
    .ex-forms div:has(> label) > label:first-child {word-break:keep-all;text-align:center;}
    .ex-forms div:has(> label) > label:first-child + * {border-left:solid 1px #dfdfdf;padding-left:1em;}
    .ex-forms div:has(> label) > * {flex:1 1 auto;}
    .ex-forms div:has(> label) .w-1 {flex:0 0 10rem;}
    .ex-forms div:has(> label) .w-2 {flex:0 0 calc(20rem + 1.5em);}
}

@media (min-width:1280px) {
    .ex-form > div {margin:20px auto;padding:40px;}
}

html:has(.ex-form.on),
body:has(.ex-form.on) {overflow:hidden;}

hr.mobile_br {display:block;visibility:hidden;margin:5px 0;height:1px;border:0;}
@media (min-width:768px) {
    hr.mobile_br {display:inline;margin:0 1em;}
}