@charset "UTF-8"; /*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| --------------------------------------------------------------- サポート --------------------------------------------------------------- |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/ #main.support .contentsArea .headerBox .upperBox { margin-bottom: 17px; } #main.support .contentsBox { display: flex; justify-content: flex-end; position: relative; } #main.support .contentsBox:before { content: ""; display: block; height: 100%; } #main.support .contentsBox .supportListBox { flex: 0 0 300px; position: absolute; top: 0; bottom: 0; left: 0; } #main.support .contentsBox .supportListBox > .inner { width: 300px; height: 100%; box-sizing: border-box; overflow: auto; } #main.support .contentsBox .supportListBox .scrollAreaOuter { overflow: hidden; height: 100%; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox { padding: 20px; border-bottom: 1px dotted #CCC; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .upper { margin-bottom: 5px; display: flex; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .upper .select-wrap:first-of-type { width: calc(60% - 2.5px); margin-right: 5px; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .upper .select-wrap:last-of-type { width: calc(40% - 2.5px); } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .upper .select-wrap select { width: 100%; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .lower .select-wrap select { width: 100%; display: block; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .lower .searchBox { margin-bottom: 0; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox + span { display: block; padding: 20px; } #main.support .contentsBox .supportListBox ul#scrollArea { height: calc(100% - 96px); max-height: calc(100% - 96px); overflow: auto; } #main.support .contentsBox .supportListBox ul#scrollArea li { border-bottom: 1px dotted #CCC; } #main.support .contentsBox .supportListBox ul#scrollArea li input[type="checkbox"] { display: none; } #main.support .contentsBox .supportListBox ul#scrollArea li label { display: block; margin-right: 0 !important; padding: 20px; text-decoration: none !important; transition: background-color ease 0.3s; } #main.support .contentsBox .supportListBox ul#scrollArea li label:hover, #main.support .contentsBox .supportListBox ul#scrollArea li label.active { background-color: #DFECF3; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.dateOuter {} #main.support .contentsBox .supportListBox ul#scrollArea li label span.date { display: inline-block; font-size: 11px; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label { display: inline-block; margin-left: 5px; font-size: 11px; line-height: 1; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label.important { background-color: #F30; color: #FFF; font-weight: bold; font-size: 10px; font-family: system-ui; padding: 3px 5px; vertical-align: text-bottom; } /*#main.support .contentsBox .supportListBox ul li label span.label.new { background-color: #63BCBC; color: #FFF; font-weight: bold; font-size: 10px; font-family: system-ui; padding: 3px 5px; vertical-align: text-bottom; }*/ #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span { display: inline-block; background-color: #63BCBC; color: #FFF; font-weight: bold; font-size: 10px; font-family: system-ui; padding: 3px 5px; vertical-align: text-bottom; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span.labelbg0 { background-color: #FF8373; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span.labelbg1 { background-color: #FFCA83; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span.labelbg2 { background-color: #4AD991; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span.labelbg5 { background-color: #A3A1FB; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span.labelbg3 { background-color: #63BCBC; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span.labelbg4 { background-color: #AAA; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span.labelbg6 { background-color: #FF6565; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span[name="tanto"] { background-color: #818181; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.label > span:empty { display: none; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.ttl { display: block; font-size: 14px; } #main.support .contentsBox .supportListBox ul#scrollArea li label span.mark { display: none; } #main.support > .inner > .contentsArea > .contentsBox:before { content: none !important; } #main.support .contentsBox .supportDetailBoxOuter { flex: 0 0 calc(100% - 300px); position: relative; padding: 40px; box-sizing: border-box; } #main.support .contentsBox .supportDetailBoxOuter:after { content: ""; display: block; width: 20px; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.03) 100%); } #main.support .contentsBox .supportDetailBoxOuter .sttl { font-size: 1.3em; font-family: system-ui; font-weight: bold; margin-bottom: 15px; display: flex; justify-content: space-between; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:first-of-type { display: flex; flex-direction: column; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:first-of-type span:first-of-type { font-size: 0.8em; font-weight: normal; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:last-of-type { display: flex; align-items: flex-end; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:last-of-type .select-wrap { margin-right: 5px; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:last-of-type .searchBox { margin-bottom: 0; margin-right: 5px; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:last-of-type .searchBox .inputOuter:after { z-index: 13; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:last-of-type .searchBox input.selectedText { font-size: 13px; z-index: 12; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:last-of-type .searchBox .extSearch { font-size: 12px; z-index: 11; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:last-of-type .searchBox .extSearch .searchResultBox .searchBox input[type="submit"] { font-size: 12px; } #main.support .contentsBox .supportDetailBoxOuter .sttl .col:last-of-type .btnDetail { height: 25px; font-size: 0.8em; } #main.support .contentsBox .supportDetailBoxOuter .scrollArea { height: calc(100% - 89px); } #main.support .contentsBox .supportDetailBoxOuter .scrollArea.customerDirect { height: calc(100% - 76px); } #main.support .contentsBox .supportDetailBoxOuter .scrollArea .scrollBox { padding: 20px; } #main.support .contentsBox .supportDetailBoxOuter .scrollArea .scrollBox .content { height: 100%; overflow: hidden; border: none; padding: 0; } #main.support .contentsBox .supportDetailBoxOuter .scrollArea .scrollBox .content .inner { height: 100%; overflow: auto; } #main.support .contentsBox .supportDetailBoxOuter .bottomBox { padding: 10px 0; } @media screen and (max-width: 780px) { body.Support { overflow: hidden; } #main.support { padding: 17px 10px 10px; } #main.support .contentsArea .headerBox .upperBox { margin-bottom: 17px !important; } #main.support .contentsArea .headerBox .upperBox h2 { font-size: 1.2em; } #main.support .contentsArea .headerBox .upperBox { margin-bottom: 17px !important; } #main.support .contentsBox { display: block; height: 100%; overflow: hidden; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox { padding: 10px; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .lower .searchBox > .inputOuter { width: 100%; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .lower .searchBox.SizeM input.selectedText { width: 100%; } #main.support .contentsBox .supportListBox .scrollAreaOuter .choiceBox > .lower .searchBox.SizeM .extSearch { width: calc(100% + 20px); } #main.support .contentsBox .supportListBox { height: 100%; overflow-y: auto; } #main.support .contentsBox .supportListBox > .inner { width: 100%; height: 100%; } #main.support .contentsBox .supportDetailBox { opacity: 0; height: 0; max-height: 0; position: static; width: 100%; } #main.support .contentsBox .supportListBox ul li input[type="checkbox"]:checked + label + .supportDetailBox { height: auto; max-height: none; opacity: 1; } #main.support .contentsBox .supportListBox ul li label { position: relative; padding: 10px 20px !important; } #main.support .contentsBox .supportListBox ul li label span.dateOuter { margin-right: 20px; } #main.support .contentsBox .supportListBox ul li label span.ttl { margin-right: 20px; font-size: 12px !important; } #main.support .contentsBox .supportDetailBoxOuter { display: none; } } /*------------------------------------------------------------ サポートページ - メッセージ表示部分 -------------------------------------------------------------*/ #pageMessage h2 { margin-bottom: 20px; } #pageMessage .scroller { height: calc(100vh - 40px - 60px - 56px - 5px); margin-bottom: 5px; overflow-x: hidden; overflow-y: auto; background: #FFF; } #pageMessage .dayBox { position: relative; } #pageMessage .day { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; padding: 10px 20px; font-size: 12px; background-color: #FFF; z-index: 10; } #pageMessage .day:before { content: ""; flex-grow: 1; height: 1px; background: #DDD; display: block; margin-right: 15px; } #pageMessage .day:after { content: ""; flex-grow: 1; height: 1px; background: #DDD; display: block; margin-left: 15px; } #pageMessage .message { padding: 13px 20px; font-size: 12px; text-align: right; } #pageMessage .message.partner { text-align: left; } #pageMessage .message .status { margin-bottom: 5px; } #pageMessage .message .user { font-size: 13px; font-weight: 600; word-wrap: break-all; } #pageMessage .message .commentBox { display: inline-flex; max-width: 60%; } #pageMessage .message .commentBox .commentInfo { display: inline-flex; flex-direction: column; } #pageMessage .message .commentBox .commentInfo span:first-of-type { margin-top: auto; } #pageMessage .message .commentBox .read { font-size: 11px; margin-right: 8px; color: #AFAFAF; align-self: flex-end; } #pageMessage .message .commentBox .time { font-size: 11px; margin-right: 8px; color: #AFAFAF; align-self: flex-end; } #pageMessage .message.partner .commentBox .commentInfo { order: 2; margin-left: 8px; } /*#pageMessage .message.partner .commentBox .time { order: 2; margin-left: 8px; }*/ #pageMessage .message .commentBox .commentOuter { line-height: 1.6em; display: inline-flex; padding: 10px 15px 10px 15px; background-color: rgba(99, 188, 188, 0.5); border-radius: 8px; text-align: left; box-sizing: border-box; } #pageMessage .message .commentBox .commentOuterTrans { display: block; } #pageMessage .message .file-comment { width: 100%; } #pageMessage .message .file-comment .filename { display: flex; justify-content: space-between; } #pageMessage .message .file-comment .filename > span { display: inline-block; margin-right: 8px; line-height: 22px; } #pageMessage .message .file-comment p[class*="ico-"] { padding-left: 25px; background-position: left top; background-repeat: no-repeat; background-size: 18px 22px; } #pageMessage .message .file-comment .filename.ico-xls, #pageMessage .message .file-comment .filename.ico-xlsx, #pageMessage .message .file-comment .filename.ico-csv { background-image: url("../images/ico_file_xls.svg"); } #pageMessage .message .file-comment .filename.ico-doc, #pageMessage .message .file-comment .filename.ico-docx { background-image: url("../images/ico_file_doc.svg"); } #pageMessage .message .file-comment .filename.ico-ppt, #pageMessage .message .file-comment .filename.ico-pptx { background-image: url("../images/ico_file_ppt.svg"); } #pageMessage .message .file-comment .filename.ico-pdf { background-image: url("../images/ico_file_pdf.svg"); } #pageMessage .message .file-comment .filename.ico-txt { background-image: url("../images/ico_file_txt.svg"); } #pageMessage .message .file-comment .filename a.btnSubS { height: 22px; font-size: 12px; padding: 0 10px; display: inline-block; line-height: 22px; border-radius: 3px; background-color: #818181; text-decoration: none; } #pageMessage .message .file-comment .file { margin-top: 10px; text-align: center; width: 100%; } #pageMessage .message .file-comment img { max-width: 100%; width: 100%; height: auto; margin-bottom: 5px; } #pageMessage .message.partner .commentBox .commentOuter { order: 1; background-color: rgba(223, 236, 243, 1); } #pageMessage .message .commentBox .commentOuter .comment.comment-trans { order: 2; margin-bottom: 5px; padding-bottom: 8px; border-bottom: 1px dotted #FFF; } #pageMessage .message .commentBox .commentOuter .comment { order: 1; padding-top: 3px; font-size: 12px !important; } #pageMessage .dropzone_async { width: 24px; height: 24px; } #pageMessage .dz-preview { display: none; } #pageMessage .inputBlock { display: flex; justify-content: space-between; position: relative; } #pageMessage .inputBlock #message_file { z-index: 10; position: absolute; top: 10px; left: 10px; display: block; flex-grow: 0; flex-shrink: 0; flex-basis: 35px; margin-right: 10px; width: 35px; height: 35px; background: #818181 url("../images/ico_clip.svg") no-repeat center center; text-indent: -9999px; background-size: 14px auto; border-radius: 3px; cursor: pointer; transition: opacity 0.3s; } #pageMessage .inputBlock #message_file:hover { opacity: 0.6; } #pageMessage .inputBlock textarea { padding: 10px 10px 10px 60px; flex: 1; height: 4em; box-sizing: border-box; font-size: 14px; } #pageMessage .inputBlock .send { flex-grow: 0; flex-shrink: 0; flex-basis: 110px; padding: 14px; background: #63BCBC; color: #FFF; border-radius: 4px; margin: 0 0 0 5px; cursor: pointer; border: none; font-size: 1.3em; font-weight: bold; transition: all 0.2s; } #pageMessage .inputBlock .send:hover { opacity: 0.7; } #pageMessage .modalWindow .scrollBox { margin: 40px; padding: 0; } #pageMessage .modalOuter.modalSizeS .modalWindow .scrollArea .outerBox.boxGradation:after { bottom: 40px; } #pageMessage .modalWindow .bottomBox {} /*メッセージ モーダル表示用*/ body#pageMessage .modalWindow .scrollBox { margin: 0; padding: 20px; } body#pageMessage .modalOuter .modalWindow .scrollArea .outerBox.boxGradation:after { bottom: 38px; left: calc(0% + 21px); width: calc(100% - 42px); } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter { /*height: calc(100% - 116px);*/ box-sizing: border-box; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea { height: 100%; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl #sttlDate { font-size: 0.8em; font-weight: normal; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl #sttlInfo br { display: none; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl { font-size: 1.3em; font-family: system-ui; font-weight: bold; margin-bottom: 15px; display: flex; justify-content: space-between; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:first-of-type { display: flex; flex-direction: column; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type { display: flex; align-items: flex-end; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type .select-wrap { margin-right: 5px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type .select-wrap:after { margin-top: -5px; right: calc(0% + 10px); } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type .searchBox { margin-bottom: 0; margin-right: 5px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type .searchBox .inputOuter:after { z-index: 13; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type .searchBox input.selectedText { font-size: 13px; z-index: 12; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type .searchBox .extSearch { font-size: 12px; z-index: 11; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type .searchBox .extSearch .searchResultBox .searchBox input[type="submit"] { font-size: 12px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl .col:last-of-type .btnDetail { height: 25px; font-size: 0.8em; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .scrollBox { overflow: hidden; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .scrollBox .content { height: calc(100% - 52px); overflow: hidden; padding: 20px; border: 1px solid #DDD; position: relative; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .scrollBox .content.customerDirect { height: calc(100% - 39px); } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .scrollBox .content:after { content: ""; position: absolute; bottom: calc(0% + 20px); right: calc(0% + 20px); left: calc(0% + 20px); display: block; width: calc(100% - 40px); height: 10px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, 1) 100%); } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .scrollBox .content .inner { height: 100%; overflow: auto; } body#pageMessage .modalWindow .bottomBox { padding: 10px; box-sizing: border-box; height: 100%; display: block; } @media screen and (max-width: 780px) { body#pageMessage .modalOuter.modalSizeS .modalWindow > .inner { height: calc(100% - 20px); margin: 10px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea { padding: 10px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl { display: block; margin-bottom: 10px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl #sttlDate { font-size: 11px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl #sttlInfo { display: flex; justify-content: space-between; margin-bottom: 5px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl #sttlInfo .ttl { font-size: 12px; line-height: 1.4em; flex: 1; margin-right: 5px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl #sttlInfo .ttl br { display: block; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl #sttlInfo .spBtn { display: flex; align-items: flex-end; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl #sttlInfo .spBtn a.btnDetail { font-size: 12px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl > .col:nth-of-type(2) { width: 100%; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl > .col:nth-of-type(2) .searchBox { margin-right: 0; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl > .col:nth-of-type(2) #sttlSelectTanto { margin-right: 0; width: 100%; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl > .col:nth-of-type(2) #sttlSelectTanto .inputOuter { width: 100%; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl > .col:nth-of-type(2) .searchBox input.selectedText { width: 100%; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .sttl > .col:nth-of-type(2) .searchBox .extSearch { width: calc(100% + 20px); } body#pageMessage .modalOuter .modalWindow .scrollBox { padding: 10px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .scrollBox .content { height: calc(100% - 92px); padding: 10px; } body#pageMessage .modalOuter .modalWindow .scrollAreaOuter .scrollArea .scrollBox .content:after { bottom: calc(0% + 8px); right: calc(0% + 10px); left: calc(0% + 10px); width: calc(100% - 20px); } body#pageMessage .modalOuter .modalWindow .bottomBox .inputBlock { display: block; } body#pageMessage .modalOuter .modalWindow .bottomBox .inputBlock .send { width: 100%; height: 28px; margin: 5px 0 0 0; display: flex; justify-content: center; align-items: center; font-size: 12px; } body#pageMessage .modalOuter .modalWindow .day { top: -1px; } } /*修正履歴表示用*/ #pageMessage .fixHistory {} #pageMessage .fixHistory > p { padding-left: 1.8em; position: relative; margin-bottom: 5px; } #pageMessage .fixHistory > p:before { content: ""; position: absolute; left: 0; bottom: 2px; display: inline-block; width: 18px; height: 18px; padding-bottom: 1px; margin-right: 5px; background-image: url(../images/ico_pen.svg); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 18px 18px; } #pageMessage .fixHistory .fixContents {} #pageMessage .fixHistory .fixContents > p { display: flex; justify-content: center; padding-bottom: 10px; } #pageMessage .fixHistory .fixContents .fixDetail { background-color: #FFF; padding: 10px 15px; border-radius: 5px; } #pageMessage .fixHistory .fixContents .fixDetail .eachDetail { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #DDD; } #pageMessage .fixHistory .fixContents .fixDetail .eachDetail:last-of-type { margin-bottom: 0; border-bottom: none; } #pageMessage .fixName { padding-bottom: 10px; font-weight: bold; font-size: 1em; line-height: 1em; color: #838691; } #pageMessage .fixBefore { display: flex; padding-bottom: 5px; } #pageMessage .fixBefore > .col span.fixLabel { display: inline-block; width: 50px; background-color: #BCBCCB; color: #FFF; text-align: center; font-weight: bold; font-size: 0.9em; margin-right: 5px; } #pageMessage .fixAfter { display: flex; } #pageMessage .fixAfter > .col span.fixLabel { display: inline-block; width: 50px; background-color: #55A8D0; color: #FFF; text-align: center; font-weight: bold; font-size: 0.9em; margin-right: 5px; }