div#messagewrapper{max-width:100%;width:100%;display:contents;&:has(div#messageresult){pointer-events:none}/**/ form[class^="messageform"],div#messageconfirmlist{display:flex;flex-direction:column;&:not(div#messageconfirmlist){row-gap:1.5em}&:not(form[class^="messageform"]){row-gap:2.5em}}form[class^="messageform"]{width:100%;max-width:30em;&:not([class$="-center"]){align-items:flex-start;[data-message]::after,[data-message]::before{top:50%;left:100%;transform:translateY(-50%);bottom:auto}[data-message]::after{margin-left:10px}[data-message]::before{margin-left:-2px;border-right-color:var(--bw);transform:translateY(-50%)}&:not(:has(input[name="messagereply"]))>button.messagesend{margin-block-start:2em}button.messagesend{margin-inline-start:auto}}&[class$="-center"]{margin-inline:auto;align-items:center;[data-message]::after,[data-message]::before{top:0;left:50%;transform:translate(-50%,calc(-100% - 10px))}[data-message]::before{border-top-color:var(--bw);transform:translate(-50%,-10px)}label:has(textarea,input[type="text"]){align-items:center}button.messagesend{margin-block-start:1.5em}}span{font-size:0.8em}span:has(span:is(.messageany,.messagerequired)){display:flex;align-items:center;column-gap:0.3em;width:fit-content;span:is(.messageany,.messagerequired){display:grid;place-items:center;width:3em;height:2em;color:var(--white);border-radius:3px;&.messageany{background-color:var(--green)}&.messagerequired{background-color:var(--red)}}}[data-message]{position:relative;&::after,&::before{position:absolute;text-align:center;opacity:0;visibility:hidden;pointer-events:none;z-index:var(--z-index)}&::after{content:attr(data-message);width:max-content;background-color:var(--bw);color:var(--wb);padding-inline:0.6em;padding-block:0.4em;border-radius:3px;white-space:pre-wrap}&::before{content:"";border:6px solid transparent}&:hover::after,&:hover::before{animation:var(--fade)}}label:has(input[type="text"],textarea){display:inline-flex;flex-direction:column;row-gap:0.3em;:is(input[type="text"],textarea).messagelengtherror{outline:1px solid var(--red);animation:messagelengtherror 6s forwards}&:has(input[type="text"]){width:fit-content;input[type="text"]{max-width:15em;width:100%}}&:has(textarea){width:100%;textarea{width:100%;@media(hover:hover){min-height:9.5em}@media(hover:none){min-height:13.5em}}}}}/**/ button:is(.messagesend,#messagecheck){display:grid;place-content:center;&:not(button.messagesend){margin-block-start:-1.25em;margin-block-end:-1.25em;font-size:0.8em;width:4em;height:2em;margin-left:auto}&[disabled]{background-color:color-mix(in srgb,var(--slight) 50%,var(--bg));color:color-mix(in srgb,currentColor 30%,var(--slight))}&:not([disabled]):not(button.messagesend){color:currentColor;background-color:var(--slight);@media(hover:hover){&:hover{color:var(--wb);background-color:var(--color,var(--bw))}}@media(hover:none){&:active{color:var(--wb);background-color:var(--color,var(--bw))}}}}/**/ button.messagesend{font-weight:bold;width:6.5em;min-height:3.5em;border-radius:5px;transition:var(--property),transform var(--transition);&:not([disabled]){color:var(--wb);background-color:var(--color,var(--bw));@media(hover:hover){&:hover{transform:scale(1.1)}}@media(hover:none){&:active{transform:scale(1.1)}}}}/**/ &:has(div#messageconfirm:popover-open) form#message button.messagesend{background-color:color-mix(in srgb,var(--slight) 50%,transparent);color:color-mix(in srgb,currentColor 30%,var(--slight))}/**/ div:is(#messageform,#messageconfirm):popover-open>div:has(button.closebtn){max-height:80dvh;&:has(form[class^="messageform"]){max-width:calc(30em + 4em)}&:has(div#messageconfirmlist){max-width:50em;width:fit-content;overflow:hidden;display:flex;div#messageconfirmlist{align-items:center;&>p{font-size:1.2em;text-align:center}&>div{overflow-y:auto;&>dl{display:grid;row-gap:1.5em;grid-template-columns:6em minmax(0,1fr);dt{font-weight:bold;span{position:sticky;top:0;background-color:var(--slight);padding:1em;display:grid;place-content:center;border-radius:3px}}dd{padding:1em;width:fit-content;margin-inline:auto;white-space:pre-wrap}}}}}}/**/:is(div:not(:has(>div#messageconfirm:popover-open))>div#messageform,div#messageform:popover-open + div#messageconfirm:popover-open,form[class^="messageform"] + div#messageconfirm:popover-open)::backdrop{background-color:var(--backdrop);animation:var(--fadein)}:is(div:not(:has(>div#messageconfirm:popover-open))>div#messageform,div#messageform:popover-open + div#messageconfirm:popover-open,form[class^="messageform"] + div#messageconfirm:popover-open)>div{box-shadow:var(--box-shadow)}/**/ div#messageresult:popover-open>p{text-align:center;&.error.limit::after{content:"一日の送信上限に達しました\Aたくさんありがとう！"}&.error.required::after{content:"必須項目を入力してください"}&.error.length::after{content:"文字数オーバー\A内容を短くして再度お試しください"}&.error.forbidden::after{content:"送信不可な文言が含まれているか、\Aセッションが切れた可能性があります\Aページを更新して再度お試しください"}&.error.offline::after{content:"通信エラー\Aネットワーク環境をご確認ください"}&.error::after{content:"エラーが発生しました\Aページを更新して再度お試しください"}&.success::after{content:"送信完了\Aありがとうございます！"}}}/**/@keyframes messagelengtherror{0%{outline:1px solid var(--red)}90%{outline:1px solid var(--red)}100%{outline:1px solid transparent}}